Dialog

弹框

Dialog，也叫 “modal”，表现为带遮罩的弹框。可以分为 Alert 和 Confirm 两种。

实现这个功能调用微信 API wx.showModal() 即可，然后设置不同的参数就可以实现Alert 或者 Confirm，示例代码如下：

  1. <template>
  2.   <div class="page">
  3.     <div class="weui-btn-area">
  4.       <button class="weui-btn" type="default" @click="openConfirm">Confirm Dialog</button>
  5.       <button class="weui-btn" type="default" @click="openAlert">Alert Dialog</button>
  6.     </div>
  7.   </div>
  8. </template>
  10. <script>
  11. import base64 from '../../../static/images/base64';
  12. export default {
  13.   data() {
  14.     return {
  15.     }
  16.   },
  17.   methods: {
  18.     openConfirm() {
  19.       wx.showModal({
  20.         title: '弹窗标题',
  21.         content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
  22.         confirmText: "主操作",
  23.         cancelText: "辅助操作",
  24.         success: function (res) {
  25.           console.log(res);
  26.           if (res.confirm) {
  27.             console.log('用户点击主操作')
  28.           } else {
  29.             console.log('用户点击辅助操作')
  30.           }
  31.         }
  32.       });
  33.     },
  34.     openAlert() {
  35.       wx.showModal({
  36.         content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
  37.         showCancel: false,
  38.         success: function (res) {
  39.           if (res.confirm) {
  40.             console.log('用户点击确定')
  41.           }
  42.         }
  43.       });
  44.     }
  45.   }
  46. }
  47. </script>
  49. <style>
  50. page {
  51.   margin-top: 50px;
  52.   padding: 15px;
  53.   box-sizing: border-box;
  54. }
  55. </style>

效果

dialog01