Dialog对话框

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-dialog": "/miniprogram_npm/vtuweapp/dialog/vtu-dialog"
    3. }
    4.

    代码演示

    普通对话框

    1. <vtu-btn bind:click="alert1" type="primary" custom-class="dialog-btn">普通对话框</vtu-btn>
    2. <vtu-btn bind:click="alert2" type="primary" custom-class="dialog-btn">普通对话框(无取消按钮)</vtu-btn>
    3. <vtu-btn bind:click="alert3" type="danger" custom-class="dialog-btn">确认对话框(开放能力)</vtu-btn>
    4. <vtu-btn bind:click="alert4" type="success" custom-class="dialog-btn">自定义按钮排列</vtu-btn>
    5. <vtu-btn bind:click="alert5" type="warning" custom-class="dialog-btn">点击遮罩关闭</vtu-btn>
    6. <vtu-btn bind:click="alert6" type="success" custom-class="dialog-btn">横向排列</vtu-btn>
    7. <vtu-dialog id="Vtu-Dialog"></vtu-dialog>
    9. import Dialog from "../../../miniprogram_npm/vtuweapp/dialog/vtu-index";
    10. Page({
    11.   data: {},
    13.   alert1: function() {
    14.     Dialog().alert({
    15.       title: '普通提示',
    16.       content: '显示您要确定的内容信息'
    17.     })
    18.   },
    20.   alert2: function() {
    21.     Dialog().alert({
    22.       title: '普通提示',
    23.       content: '显示您要确定的内容信息',
    24.       showCancel: false
    25.     })
    26.   },
    28.   alert3: function() {
    29.     Dialog().confirm({
    30.       title: '确认对话框',
    31.       content: '系统需要您的授权，请登录',
    32.       confirmLabel: '登录',
    33.       confirmOpenType: 'getUserInfo',
    34.       cancelLabel: '不需要',
    35.       success: function(e) {
    36.         wx.showToast({
    37.           title: "已确认",
    38.           icon: 'none',
    39.           duration: 2000
    40.         });
    41.       },
    42.       fail: function() {
    43.         wx.showToast({
    44.           title: "已取消",
    45.           icon: 'none',
    46.           duration: 2000
    47.         });
    48.       }
    49.     })
    50.   },
    52.   alert4: function() {
    53.     Dialog().open({
    54.       title: '自定义对话框',
    55.       content: '请选择付款方式',
    56.       buttons: [
    57.         {
    58.           type: 'primary',
    59.           label: '微信支付(异步)',
    60.           async: true,
    61.           click: function(e) {
    62.             setTimeout(function() {
    63.               Dialog().close()
    64.             }, 2000)
    65.           }
    66.         },
    67.         {
    68.           type: 'danger',
    69.           label: '支付宝支付',
    70.           click: function(e) {
    71.           }
    72.         },
    73.         {
    74.           type: 'default',
    75.           label: '取消',
    76.           click: function(e) {
    77.             Dialog().close()
    78.           }
    79.         }
    80.       ]
    81.     })
    82.   },
    84.   alert5: function() {
    85.     Dialog().confirm({
    86.       title: '确认对话框',
    87.       content: '系统需要您的授权，请登录',
    88.       confirmLabel: '登录',
    89.       confirmAsync: true,
    90.       confirmOpenType: 'getUserInfo',
    91.       cancelLabel: '不需要',
    92.       closeOnClickOverlay: true,
    93.       success: function(e) {
    94.         setTimeout(function() {
    95.           Dialog().close()
    96.         }, 2000)
    97.       },
    98.       fail: function() {
    99.         wx.showToast({
    100.           title: "已取消",
    101.           icon: 'none',
    102.           duration: 2000
    103.         });
    104.       }
    105.     })
    106.   },
    108.   alert6: function() {
    109.     Dialog().open({
    110.       title: '自定义对话框',
    111.       content: '请选择付款方式',
    112.       verticalButtons: false,
    113.       buttons: [
    114.         {
    115.           type: 'primary',
    116.           label: '微信支付',
    117.           icon: "iconfont icon-share",
    118.           click: function(e) {
    119.             setTimeout(function() {
    120.               Dialog().close()
    121.             }, 2000)
    122.           }
    123.         },
    124.         {
    125.           type: 'danger',
    126.           label: '支付宝支付',
    127.           click: function(e) {
    128.           }
    129.         },
    130.         {
    131.           type: 'default',
    132.           label: '取消',
    133.           click: function(e) {
    134.             Dialog().close()
    135.           }
    136.         }
    137.       ]
    138.     })
    139.   },
    141.   closeCustomDialog: function() {
    142.     Dialog("Vtu-Custom-Dialog").close()
    143.   }
    144. });
    145.  
    146.

    自定义对话框

    1. <vtu-btn bind:click="alert7" type="primary" custom-class="dialog-btn">自定义对话框</vtu-btn>
    2. <vtu-dialog id="Vtu-Custom-Dialog" show="{{show}}" title="自定义对话框内容" user-content-slot>
    3.   <view class="Vtu-Custom-Center">
    4.     <vtu-radio-group model="1" align="right">
    5.       <vtu-radio value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-radio>
    6.       <vtu-radio value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-radio>
    7.       <vtu-radio value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-radio>
    8.       <vtu-radio value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-radio>
    9.     </vtu-radio-group>
    10.   </view>
    11.   <view class="Vtu-Custom-Btn">
    12.     <vtu-btn type="primary" inlineBlock custom-class="dialog-custom-btn">确定</vtu-btn>
    13.     <vtu-btn bind:click="closeCustomDialog" inlineBlock custom-class="dialog-custom-btn">取消</vtu-btn>
    14.   </view>
    15. </vtu-dialog>
    17. import Dialog from "../../../miniprogram_npm/vtuweapp/dialog/vtu-index";
    18. Page({
    19.   data: {
    20.     show: false
    21.   },
    23.   alert7: function() {
    24.     this.setData({
    25.       show: true
    26.     })
    27.   },
    29.   closeCustomDialog: function() {
    30.     Dialog("Vtu-Custom-Dialog").close()
    31.   }
    32. });
    33.  
    34.

    组件参数

    Dialog 对话框 - 图1