wxc-dialog

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

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

    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. </script>
    35. <style>
    36. </style>

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

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

    对话框 dialog - 图2

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

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

    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'
    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.   margin-bottom: 20px;
    41.   padding: 5px;
    42. }
    43. </style>

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

    内容可以展示图片

    对话框 dialog - 图4

    换行内容+确认按钮

    多行文本

    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')
    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

    v1.0.3（2018.01.04）

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

    v1.0.2（2017.11.02）

    • update .npmignore

    v1.0.1（2017.10.24）