IBest-UI-V2

Appearance

Dialog 弹出框 ​

介绍 ​

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。

引入 ​

ts
import { IBestDialogUtil, IBestDialog } from "@ibestservices/ibest-ui-v2";

代码演示 ​

提示弹窗 ​

提示弹窗

TIP

用于提示一些消息，默认只包含一个确认按钮。

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onBtnClick: () => {
          IBestDialogUtil.open({
            title: "提示",
            message: "代码是写出来给人看的，附带能在机器上运行。"
          })
        }
      })
    }
  }
}

提示弹窗（无标题) ​

提示弹窗（无标题）

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onBtnClick: () => {
          IBestDialogUtil.open({
            message: "生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。"
          })
        }
      })
    }
  }
}

确认弹窗 ​

确认弹窗

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onBtnClick: () => {
          IBestDialogUtil.open({
            title: "提示",
            message: "生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。",
            showCancelButton: true
          })
        }
      })
    }
  }
}

圆角按钮样式 ​

圆角按钮样式

TIP

通过 theme 属性设置弹窗主题，可选值为 default（默认）、round-button（圆角按钮）；
通过 buttonSpace 属性可设置底部按钮间距, 仅 round-button 模式有效。

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  build(){
    Column(){
      IBestButton({
        text: '圆角按钮样式',
        type: 'primary',
        onBtnClick: () => {
          IBestDialogUtil.open({
            title: "提示",
            message: "生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。",
            theme: "round-button"
          })
        }
      })
    }
  }
}

背景图片 ​

背景图片

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Builder imageBgBuilder() {
    Column()
      .height(200)
  }
  build(){
    Column(){
      IBestCell({
        title: '背景图片',
        isLink: true,
        hasBorder: false,
        onCellClick: () => {
          IBestDialogUtil.open({
            bgImage: "https://img0.baidu.com/it/u=3217812679,2585737758&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
            showConfirmButton: false,
            defaultBuilder: () => this.imageBgBuilder(),
            closeOnClickOverlay: true
          })
        }
      })
    }
  }
}

异步关闭 ​

异步关闭

TIP

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onBtnClick: () => {
          IBestDialogUtil.open({
            title: textData.title,
            message: textData.life,
            showCancelButton: true,
            beforeClose: (action) => {
              if(action == "confirm"){
                return new Promise(resolve => {
                  IBestDialogUtil.open({
                    title: "提示",
                    message: "确认关闭？",
                    showCancelButton: true,
                    onConfirm: () => {
                      resolve(true)
                    },
                    onCancel: () => {
                      resolve(false)
                    }
                  })
                })
              }
              return true
            }
          })
        }
      })
    }
  }
}

内部跳转 ​

内部跳转

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local uniId: number = 0
  private uiContext = this.getUIContext()
  @Builder customComponentContent() {
    Column({space: 20}){
      Text("如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。")
      IBestButton({
        type: 'primary',
        text: "跳转页面",
        onBtnClick: () => {
          router.pushUrl({
            url: "pages/base/Button",
            params: {
              title: "Button 按钮"
            }
          })
        }
      })
    }
    .padding(20)
  }
  onDidBuild(): void {
    setTimeout(() => {
      let uniId = this.uiContext.getAttachedFrameNodeById("main")?.getUniqueId()
      if(uniId){
        this.uniId = uniId
      }
    }, 50)
  }
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onBtnClick: () => {
          IBestDialogUtil.open({
            title: textData.title,
            message: textData.life,
            showCancelButton: true,
            levelMode: 1,
            levelUniqueId: this.uniId,
            defaultBuilder: (): void => this.customComponentContent()
          })
        }
      })
    }
    .id("main")
  }
}

使用Dialog组件 ​

使用Dialog组件

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local inputValue: string = ''
  @Local formInputError: boolean = false
  @Local dialogVisible: boolean = false
  @Local dialogWidth: string = "90%"
  @Builder formInputContain() {
    Column({ space: 20 }) {
      IBestButton({
        type: 'primary',
        text: "切换宽度",
        onBtnClick: () => {
          this.dialogWidth = this.dialogWidth === "90%" ? "80%" : "90%"
        }
      })
      TextInput({ placeholder: '请输入' })
        .onChange(value => {
          this.inputValue = value
          this.formInputError = false
        })
      if (this.formInputError) {
        Text('不能为空')
          .width("100%")
          .textAlign(TextAlign.Start)
          .fontColor(Color.Red)
          .fontSize(12)
      }
    }.padding(20)
  }
  build(){
    Column(){
      IBestDialog({
        visible: this.dialogVisible!!,
        title: "提示",
        showCancelButton: true,
        defaultBuilder: (): void => this.formInputContain(),
        beforeClose: (action) => {
          if (action === 'cancel') {
            return true
          }
          const valueLength = this.inputValue.trim().length
          this.formInputError = !valueLength
          return !this.formInputError
        }
      })
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onBtnClick: () => {
          this.dialogVisible = true
        }
      })
    }
  }
}

API ​

IBestDialog @Props ​

参数说明类型默认值
visible弹窗是否可见, 支持双向绑定booleanfalse
dialogWidth弹窗的宽度number | string320
dialogBorderRadius弹窗的圆角number | string16
bgImage弹框背景图片ResourceStr''
title弹窗的标题ResourceStr``
titleColor弹窗的标题文字颜色ResourceColor#323233
titleFontSize标题的文字大小number | string16
titlePaddingTop弹窗的标题的上内边距number | string26
titlePaddingX标题的左右内边距number | string24
titleLienHeight标题的行高number | string24
titleTextAlign标题的对齐方式'left' | 'center' | 'right'center
message弹窗的内容区域文本ResourceStr''
messageFontColor弹窗的内容文字颜色ResourceColor#323233
messageFontSize弹窗的内容文字大小number | string14
messageLineHeight弹窗的内容区域文字行高number | string20
messagePaddingTop弹窗的内容区域的上内边距number | string8
messagePaddingX弹窗的内容区域的左右内边距number | string24
messagePaddingXBottom弹窗的内容区域的下内边距number | string26
messageTextAlign弹窗的内容区域的文字对齐方式left | center | rightcenter
messageMaxHeight弹窗的内容区域的滚动区域最大高度number | stringauto
theme按钮样式风格，可选值 default round-buttonstringdefault
buttonSpace按钮间距number | string0
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮文案ResourceStr确认
cancelButtonText取消按钮的文案ResourceStr取消
buttonFontSize按钮文字大小number | string16
confirmButtonColor确认按钮的文字颜色, 当 theme 为 round-button 时默认为 #fffResourceColor#3D8AF2
confirmButtonBgColor确认按钮背景色, 当 theme 为 round-button 时默认为 #3D8AF2ResourceColor#fff
cancelButtonColor取消按钮的文字颜色ResourceColor#646566
cancelButtonBgColor取消按钮背景色ResourceColor#fff
confirmButtonDisabled是否禁用确认按钮booleanfalse
cancelButtonDisabled是否禁用取消按钮booleanfalse
showOverlay是否展示遮罩层，不展示的话则没有遮罩层booleantrue
overlayColor遮罩层颜色ResourceColor0x33000000
showInSubWindow某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗booleanfalse
closeOnClickOverlay是否允许点击遮罩层关闭booleanfalse
closeOnBackPress是否允许返回键关闭booleantrue
alignment弹窗在竖直方向上的对齐方式, 可选值 top center bottomstringcenter
offsetX弹窗相对alignment所在位置的横向偏移量number | string0
offsetY弹窗相对alignment所在位置的纵向偏移量number | string0
keyboardAvoidDistance弹窗避让键盘后，和键盘之间的距离LengthMetrics16vp
levelMode弹窗显示层级LevelMode0
levelUniqueId页面级弹窗需要显示的层级下的节点 uniqueId, 仅当levelMode属性设置为LevelMode.EMBEDDED时生效number-
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action: cancel | confirm) => Promise<boolean> | boolean-
confirmButtonFontWeight 0.0.3确认按钮的文字字重FontWeightNormal

Events ​

事件名说明回调参数
onOpen打开弹窗的回调-
onClose关闭弹窗的回调-
onCancel点击取消按钮的回调-
onConfirm点击确认按钮的回调-

插槽 ​

插槽名说明类型
titleBuilder标题的插槽，优先级大于 title 属性，将会完全接管 title 的渲染和间距控制CustomBuilder
defaultBuilder内容的插槽，优先级大于 message 属性，将会完全接管 message 的渲染和间距控制CustomBuilder
footerBuilder底部按钮部分的插槽，将会完全接管按钮部分的渲染和间距控制CustomBuilder