IBest-UI@HarmonyOS

Appearance

Dialog 弹出框 ​

介绍 ​

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

引入 ​

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

代码演示 ​

提示弹窗 ​

提示弹窗

TIP

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

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

提示弹窗（无标题) ​

提示弹窗（无标题）

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

确认弹窗 ​

确认弹窗

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

圆角按钮样式 ​

圆角按钮样式

TIP

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

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

异步关闭 ​

异步关闭

TIP

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

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          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
@Component
struct DemoPage {
  @Builder customComponentContent() {
    Column(){
      Text("如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。")
    }
    .padding(20)
  }
  build(){
    Column(){
      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          IBestDialogUtil.open({
            title: textData.title,
            message: textData.life,
            showCancelButton: true,
            defaultBuilder: (): void => this.customComponentContent()
          })
        }
      })
    }
  }
}

使用Dialog组件 ​

使用Dialog组件

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State inputValue: string = ''
  @State formInputError: boolean = false
  @State dialogVisible: boolean = false

  @Builder formInputContain() {
    Column() {
      TextInput({ 'placeholder': '请输入' })
        .fontSize(14)
        .placeholderFont({ size: 14 })
        .onChange((value) => {
          this.inputValue = value;
          this.formInputError = false
        })
      if (this.formInputError) {
        Text('不能为空')
          .width('100%')
          .textAlign(TextAlign.Start)
          .margin({
            top: SPACE.BASE,
            left: SPACE.MINI
          })
          .fontColor(Color.Red)
          .fontSize(12)
          .transition({ type: TransitionType.Insert, opacity: 1 })
          .transition({ type: TransitionType.Delete, opacity: 0 })
      }

    }.width('90%').margin({ top: 15, bottom: 15 })
  }


  build(){
    Column(){
      IBestDialog({
        visible: $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',
        onClickBtn: () => {
          this.dialogVisible = true
        }
      })
    }
  }
}

API ​

IBestDialog @Props ​

参数说明类型默认值
dialogWidth弹窗的宽度number | string320
dialogBorderRadius弹窗的圆角number | string16
title弹窗的标题string``
titleColor弹窗的标题文字颜色ResourceColor#323233
titlePaddingTop弹窗的标题的上内边距number | string26
titlePaddingX标题的左右内边距number | string24
titleLienHeight标题的行高number | string24
titleFontSize标题的文字大小number | string16
titleTextAlign标题的对齐方式'left' | 'center' | 'right'center
message弹窗的内容区域文本string
messagePaddingTop弹窗的内容区域的上内边距number | string8
messagePaddingX弹窗的内容区域的左右内边距number | string24
messagePaddingXBottom弹窗的内容区域的下内边距number | string26
messageFontColor弹窗的内容文字颜色ResourceColor#323233
messageFontSize弹窗的内容文字大小number | string14
messageLineHeight弹窗的内容区域文字行高number | string20
messageTextAlign弹窗的内容区域的文字对齐方式left | center | rightcenter
messageMaxHeight弹窗的内容区域的滚动区域最大高度string60%
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮文案string确认
cancelButtonText取消按钮的文案string取消
confirmButtonColor确认按钮的文字颜色, 当 theme 为 round-button 时默认为 #fffResourceColor#3D8AF2
cancelButtonColor取消按钮的文字颜色ResourceColor#646566
confirmButtonDisabled是否禁用确认按钮booleanfalse
cancelButtonDisabled是否禁用取消按钮booleanfalse
showOverlay是否展示遮罩层，不展示的话则没有遮罩层booleantrue
overlayColor遮罩层颜色 API 10+ResourceColor0x33000000
showInSubWindow某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗booleanfalse
visible弹窗是否可见, 支持双向绑定booleanfalse
theme按钮样式风格，可选值 default round-buttonstringdefault
buttonSpace按钮间距number | string0
confirmButtonBgColor确认按钮背景色, 当 theme 为 round-button 时默认为 #3D8AF2ResourceColor#fff
cancelButtonBgColor取消按钮背景色ResourceColor#fff
closeOnBackPress是否允许返回键关闭booleanfalse

Events ​

事件名说明参数类型
onConfirm点击确认按钮的回调(event?: ClickEvent) => void
onCancel点击取消按钮的回调(event?: ClickEvent) => void
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action: 'cancel' | 'confirm') => Promise<boolean> | boolean
onOpen打开弹窗的回调() => void
onClose关闭弹窗的回调() => void

插槽 ​

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