微信小程序用vant，dialog彈出框

官網如下：
https://youzan.github.io/vant-weapp/#/dialog

看效果

1、json中引入

"usingComponents": {
    "van-dialog": "/miniprogram_npm/@vant/weapp/dialog/index"
  }

2、js引入

import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';

3、wxml引入

<van-dialog id="van-dialog" />


<van-dialog id="wan-not-pass"
  use-slot
  title="請填寫原因"
  show="{{ showDialog }}"
  show-cancel-button
  show-confirm-button
  confirm-button-text="確定"
  bind:close="onClose"
>

4、默認調用

handleDelayPass() {
    console.log('通過');
    let _this = this;
    let {id} = _this.data;
    
    Dialog.confirm({
      title: '提示',
      message: '確認通過延遲申請審核嗎？',
    })
      .then(() => {
        // on confirm
        httpRequest('/StreetManagerAssign/checkDelayApply', {
          id: id
        }, ({
          data
        }) => {
          // 頁面刷新
          wx.showToast({
            icon: 'success',
            title: '操作成功',
            duration: 2000,
            success: function(){
              setTimeout(function(){
                // 頁面刷新
                _this.onShow()
              }, 2000)
            }
          })
        }, err => {}, '')
      })
      .catch(() => {
        // on cancel
      });
    
  }

5、自定義調用

handleDelayNotPass() {
    console.log('不通過');
    this.setData({
      showDialog:true,
      delay_check_result:""
    });

  },
  onClose(e) {
    console.log(e);
    let _this = this;
    if (e.detail == 'confirm') {
      console.log('確認不通過');
      let {id,delay_check_result} = _this.data;
      if (!delay_check_result) {
        wx.showToast({
          title: '請填寫原因',
          icon: 'none',
        })
      } else {
        httpRequest('/StreetManagerAssign/checkDelayApply', {
          id: id,
          type: 2,
          delay_check_result:delay_check_result
        }, ({
          data
        }) => {
          // 頁面刷新
          wx.showToast({
            icon: 'success',
            title: '操作成功',
            duration: 2000,
            success: function(){
              setTimeout(function(){
                // 頁面刷新
                _this.onShow()
              }, 2000)
            }
          })
        }, err => {}, '')
      }
    }
    
  },
  // 改變審核不通過原因
  onChangeContent(e){
    this.setData({  delay_check_result:e.detail.value})
  }

小結:基本滿足各種需求，可以靈活運用組件模式來自用處理彈出層的業務。