微信小程序用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})
  }

小结:基本满足各种需求，可以灵活运用组件模式来自用处理弹出层的业务。