模态框 Dialog

保留当前页面,弹出一个对话框,告知用户并承载相关操作。

基本使用

Dialog组件有以下两种用法:

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

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

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

示例代码(第二种用法)

  1. <l-dialog />
  1. // js
  2. showMessage(){
  3. wx.lin.showDialog({
  4. type:"alert",
  5. title:"标题",
  6. content:"这个是提示框" ,
  7. success: (res) => {
  8. if (res.confirm) {
  9. console.log('用户点击确定')
  10. } else if (res.cancel) {
  11. console.log('用户点击取消')
  12. }
  13. }
  14. })
  15. }

模态框类型

模态框可通过设置type属性为alert或者confirm来控制模态框的类型为 提示框确认框 ,不设置则显示状态默认为alert

示例代码

  1. <!-- 提示框 -->
  2. <l-dialog
  3. show="{{true}}"
  4. type="alert"
  5. title="标题"
  6. content="这个是提示框" />
  7. <!--确认框 -->
  8. <l-dialog
  9. show="{{true}}"
  10. type="confirm"
  11. title="标题"
  12. content="这个是确认框" />

模态框 Dialog - 图1

无标题的模态弹框

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

示例代码

  1. <!-- 无标题提示框 -->
  2. <l-dialog
  3. show="{{true}}"
  4. type="alert"
  5. show-title="{{false}}"
  6. title="标题"
  7. content="这个是无标题提示框" />
  8. <!-- 无标题确认框 -->
  9. <l-dialog
  10. show="{{true}}"
  11. type="confirm"
  12. show-title="{{false}}"
  13. title="标题"
  14. content="这个是无标题确认框" />

模态框 Dialog - 图2

修改按钮文字和颜色

模态框的按钮支持 文本内容字体颜色 的修改, 设置 confirm-textcancel-text 可以更改模态框两个按钮的文本, confirm-colorcancel-color 则可以更改他们的字体颜色。

注意事项

  • 提示框只需设置 confirm-textconfirm-color

示例代码

  1. <l-dialog
  2. show="{{true}}"
  3. type="confirm"
  4. title="提问"
  5. content="PHP是最好的语言吗?"
  6. confirm-text="yes"
  7. confirm-color="#f60"
  8. cancel-text="no~"
  9. cancel-color="#999" />

模态框 Dialog - 图3

设置子节点

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

注意事项

  • 不建议在组件中传入多个子节点。
  • 子节点默认是垂直居中显示。

示例代码

  1. <l-dialog
  2. show="{{true}}"
  3. type="confirm"
  4. show-title="{{false}}"
  5. title="标题"
  6. >
  7. <image class='dio-img' src='/path/to/example.gif'></image>
  8. </l-dialog>

模态框 Dialog - 图4

锁定

模态框设置 locked 属性为 false 时,点击背景可隐藏模态框组件,默认为 true , 即点击背景无法关闭该组件。

示例代码

  1. <l-dialog
  2. show="{{true}}"
  3. type="alert"
  4. show-title="{{false}}"
  5. locked="{{locked}}"
  6. title="标题"
  7. content="这个是提示框"
  8. >
  9. </l-dialog>

模态框参数 (Dialog Attributes)

参数说明类型可选值默认值
show控制模态框的显示Booleantrue/falsefalse
type设置模态框的类型Stringalert/confirmalert
title设置模态框的标题String——-提示
title-color设置标题的颜色String#45526b;
content设置模态框的内容String——-
locked设置背景是否为锁定态Boolean——-true
show-title是否显示模态框的标题Booleantrue/falsetrue
confirm-text确定按钮的文本String确定
confirm-color确定按钮的颜色String#3683d6
cancel-text取消按钮的文本String取消
cancel-color取消按钮的颜色String#45526b
is-hover是否显示hover效果Boolean—-true

模态框外部样式类 (Dialog ExternalClasses)

外部样式类名说明备注
l-class设置dialog的外部样式类
l-title-class设置dialog头部的外部样式类
l-content-class设置dialog内容的外部样式类
l-cancel-class设置dialog取消按钮的外部样式类
l-confirm-class设置dialog确定按钮的外部样式类
l-bg-class设置dialog遮罩的外部样式类

模态框事件 (Dialog Events)

事件名称说明返回值备注
bind:lintap当点击背景时触发的事件————-————
bind:linconfirm当点击确定时触发的事件confirm————
bind:lincancel当点击取消时触发的事件cancel————