wxc-dialog

MinUI 小程序组件 - 对话框

Install

  1. $ min install @minui/wxc-dialog

Demos

标题+单行内容+取消按钮+确认按钮

告知当前状态，信息和解决方法

对话框 dialog - 图1

  1. <template>
  2.   <button bindtap="showDialog">标题+单行内容+取消按钮+确认按钮</button>
  3.   <wxc-dialog class="wxc-dialog" title="标题" content="告知当前状态，信息和解决方法" confirm-text="主操作" cancel-text="辅助操作" bindconfirm="onConfirm" bindcancel="onCancel"></wxc-dialog>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-dialog': '@minui/wxc-dialog'
  11.     }
  12.   },
  13.   data: {},
  14.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  15.   methods: {
  16.     showDialog() {
  17.       let dialogComponent = this.selectComponent('.wxc-dialog')
  18.       dialogComponent && dialogComponent.show();
  19.     },
  20.     hideDialog() {
  21.       let dialogComponent = this.selectComponent('.wxc-dialog')
  22.       dialogComponent && dialogComponent.hide();
  23.     },
  24.     onConfirm () {
  25.       console.log('点击了确认按钮')
  26.       this.hideDialog()
  27.     },
  28.     onCancel () {
  29.       console.log('点击了取消按钮')
  30.       this.hideDialog()
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style>
  37. </style>

标题+单行内容+确认按钮

告知当前状态，信息和解决方法

对话框 dialog - 图2

  1. <template>
  2.   <button bindtap="showDialog">标题+单行内容+确认按钮</button>
  3.   <wxc-dialog class="wxc-dialog" title="标题" content="告知当前状态，信息和解决方法" confirm-text="确定" bindconfirm="onConfirm" bindcancel="onCancel"></wxc-dialog>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-dialog': '@minui/wxc-dialog'
  11.     }
  12.   },
  13.   data: {},
  14.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  15.   methods: {
  16.     showDialog() {
  17.       let dialogComponent = this.selectComponent('.wxc-dialog')
  18.       dialogComponent && dialogComponent.show();
  19.     },
  20.     hideDialog() {
  21.       let dialogComponent = this.selectComponent('.wxc-dialog')
  22.       dialogComponent && dialogComponent.hide();
  23.     },
  24.     onConfirm () {
  25.       console.log('点击了确认按钮')
  26.       this.hideDialog()
  27.     },
  28.     onCancel () {
  29.       console.log('点击了取消按钮')
  30.       this.hideDialog()
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style>
  37. </style>

标题+内容+额外内容+确认按钮

这里可能是说明文字，并且支持自定义的额外内容

对话框 dialog - 图3

  1. <template>
  2.   <button bindtap="showDialog">标题+内容+额外内容+确认按钮</button>
  3.   <wxc-dialog class="wxc-dialog" title="弹窗" content="这里可能是说明文字" confirm-text="主按钮" bindconfirm="onConfirm" bindcancel="onCancel">
  4.     <input class="input" placeholder="自定义的额外内容" />
  5.   </wxc-dialog>
  6. </template>
  8. <script>
  9. export default {
  10.   config: {
  11.     usingComponents: {
  12.       'wxc-dialog': '@minui/wxc-dialog'
  13.     }
  14.   },
  15.   data: {},
  16.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  17.   methods: {
  18.     showDialog() {
  19.       let dialogComponent = this.selectComponent('.wxc-dialog')
  20.       dialogComponent && dialogComponent.show();
  21.     },
  22.     hideDialog() {
  23.       let dialogComponent = this.selectComponent('.wxc-dialog')
  24.       dialogComponent && dialogComponent.hide();
  25.     },
  26.     onConfirm () {
  27.       console.log('点击了确认按钮')
  28.       this.hideDialog()
  29.     },
  30.     onCancel () {
  31.       console.log('点击了取消按钮')
  32.       this.hideDialog()
  33.     }
  34.   }
  35. }
  36. </script>
  38. <style>
  39. .input {
  40.   border: 1px solid #cccccc;
  41.   margin-bottom: 20px;
  42.   padding: 5px;
  43. }
  44. </style>

标题+图片+单行内容+确认按钮

内容可以展示图片

对话框 dialog - 图4

  1. <template>
  2.   <button bindtap="showDialog">标题+图片+单行内容+确认按钮</button>
  3.   <wxc-dialog class="wxc-dialog" title="标题" content="描述内容，最好不超过一行" confirm-text="知道了" image="http://s2.mogucdn.com/b7/pic/141204/icfa_ieydsntfgu3taytfmqytambqgiyde_640x960.jpg_468x468.jpg" bindconfirm="onConfirm" bindcancel="onCancel"></wxc-dialog>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-dialog': '@minui/wxc-dialog'
  11.     }
  12.   },
  13.   data: {},
  14.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  15.   methods: {
  16.     showDialog() {
  17.       let dialogComponent = this.selectComponent('.wxc-dialog')
  18.       dialogComponent && dialogComponent.show();
  19.     },
  20.     hideDialog() {
  21.       let dialogComponent = this.selectComponent('.wxc-dialog')
  22.       dialogComponent && dialogComponent.hide();
  23.     },
  24.     onConfirm () {
  25.       console.log('点击了确认按钮')
  26.       this.hideDialog()
  27.     },
  28.     onCancel () {
  29.       console.log('点击了取消按钮')
  30.       this.hideDialog()
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style>
  37. </style>

换行内容+确认按钮

多行文本

对话框 dialog - 图5

  1. <template>
  2.   <button bindtap="showDialog">换行内容+确认按钮</button>
  3.   <wxc-dialog class="wxc-dialog" title="标题" content="告知当前状态，信息和解决方案，文字换行的情况。" confirm-text="知道了" bindconfirm="onConfirm" bindcancel="onCancel"></wxc-dialog>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-dialog': '@minui/wxc-dialog'
  11.     }
  12.   },
  13.   data: {},
  14.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  15.   methods: {
  16.     showDialog() {
  17.       let dialogComponent = this.selectComponent('.wxc-dialog')
  18.       dialogComponent && dialogComponent.show();
  19.     },
  20.     hideDialog() {
  21.       let dialogComponent = this.selectComponent('.wxc-dialog')
  22.       dialogComponent && dialogComponent.hide();
  23.     },
  24.     onConfirm () {
  25.       console.log('点击了确认按钮')
  26.       this.hideDialog()
  27.     },
  28.     onCancel () {
  29.       console.log('点击了取消按钮')
  30.       this.hideDialog()
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style>
  37. </style>

黑色内容+确认按钮

文案颜色可自定义

对话框 dialog - 图6

  1. <template>
  2.   <button bindtap="showDialog">黑色内容+确认按钮</button>
  3.   <wxc-dialog class="wxc-dialog" content-color="#353535" content="告知当前状态，信息和解决方案，文字换行的情况。" confirm-text="知道了" bindconfirm="onConfirm" bindcancel="onCancel"></wxc-dialog>
  4. </template>
  6. <script>
  7. export default {
  8.   config: {
  9.     usingComponents: {
  10.       'wxc-dialog': '@minui/wxc-dialog'
  11.     }
  12.   },
  13.   data: {},
  14.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  15.   methods: {
  16.     showDialog() {
  17.       let dialogComponent = this.selectComponent('.wxc-dialog')
  18.       dialogComponent && dialogComponent.show();
  19.     },
  20.     hideDialog() {
  21.       let dialogComponent = this.selectComponent('.wxc-dialog')
  22.       dialogComponent && dialogComponent.hide();
  23.     },
  24.     onConfirm () {
  25.       console.log('点击了确认按钮')
  26.       this.hideDialog()
  27.     },
  28.     onCancel () {
  29.       console.log('点击了取消按钮')
  30.       this.hideDialog()
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style>
  37. </style>

API

Dialog【props】

名称描述
title【说明】标题文案【类型】String【默认值】""
title-color【说明】标题颜色【类型】String【默认值】#000000
content【说明】内容 【类型】String【默认值】""
content-color【说明】内容颜色【类型】String【默认值】#888888
confirm-text【说明】确认按钮文案 【类型】String【默认值】""
confirm-color【说明】确认按钮文案颜色【类型】String【默认值】#ff5777
cancel-text【说明】取消按钮文案 【类型】String【默认值】""
cancel-color【说明】取消按钮文案颜色【类型】String【默认值】#666666
image【说明】显示的图片链接 【类型】String【默认值】""
地址
dialog 组件文档 https://meili.github.io/min/docs/minui/index.html#dialog
dialog 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-dialog
MinUI 组件库 https://github.com/meili/minui

Preview

dialog

Dialog【methods】

名称描述
show【说明】显示弹窗【params】void【return】void
hide【说明】隐藏弹窗【params】void【return】void

ChangeLog

v1.0.3（2018.01.04）

  • 修复点击蒙层即关闭 dialog 的问题

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本