模态框 Dialog

Dialog组件有以下两种用法：

• 常规组件的使用方式，通过更改传入的属性值来控制的显示和隐藏。

• wx.lin.showDialog(object)，使用wx.lin.showDialog的调用时，与组件的使用一致，需要在json文件中引入组件，且在wxml中写入Dialog组件。

`wx.lin.showDialog接受的参数是个对象，里面包含了与消息提示相关的属性。

// js
showMessage(){
    wx.lin.showDialog({
      type:"alert",     
      title:"标题",
      success: (res) => {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
      }
    })
}

模态框类型

示例代码

模态框可以通过设置 show-title 属性为true、false来控制组件标题的显示和隐藏，不设置则显示状态默认为true。

<!-- 无标题提示框 -->
<l-dialog 
  show="{{true}}"
  type="alert"  
  show-title="{{false}}"
  title="标题"
  content="这个是无标题提示框" />

<!-- 无标题确认框 -->
<l-dialog 
  show="{{true}}"
  type="confirm"  
  show-title="{{false}}"
  title="标题"
  content="这个是无标题确认框" />

修改按钮文字和颜色

模态框的按钮支持 和 字体颜色 的修改， 设置 confirm-text 和 cancel-text 可以更改模态框两个按钮的文本， confirm-color 和 cancel-color 则可以更改他们的字体颜色。

• 提示框只需设置 confirm-text和 confirm-color。

示例代码

我们在使用的组件的时候，可以根据使用场景,自由的在遮罩层组件内插入 image、 view、 text 等子节点，当然，你也可以在其中插入 自定义组件 。

注意事项

• 子节点默认是垂直居中显示。

<l-dialog 
  show="{{true}}"
  type="confirm"  
  show-title="{{false}}"
  title="标题"
>
  <image class='dio-img' src='/path/to/example.gif'></image>
</l-dialog>

锁定

示例代码

模态框事件 （Dialog Events）