【Vant Weapp】van-dialog 弹出框

tabbar层级过高盖住遮罩的问题

 

期待效果：

原生tabbar层级过高，vant的遮罩是无法覆盖住的。所以可以自定义一个tabbar。参考：自定义tabbar。    

阻止confirm关闭弹窗

点击提交的时候，展示提示语，然后成功后调取关闭弹窗的方法

<van-dialog
  use-slot
  show="{{ show }}"
  cancel-button-text="取消"
  confirmButtonText="提交"
  show-cancel-button
  bind:confirm="onConfirm"
  bind:cancel="onCancel"
  before-close="{{ beforeClose }}"
>
  <view class="box">
    <van-checkbox-group  
        value="{{ id }}" 
        bind:change="onChange"
    >
      <van-checkbox 
        shape="square" 
        name="{{item.id}}" 
        wx:for="{{list}}" 
        wx:key="index"
      >{{item.name}}</van-checkbox>
    </van-checkbox-group>
  </view>
</van-dialog>

data: {
  show: true,

  list:[
    {
      id: 1,
      name: 1,
    },{
      id: 2,
      name: 2
    }
  ],
  id: [],

  beforeClose(action) {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (action === 'confirm') {
            resolve(false);
        } else {
          resolve(true);
        }
      }, 0);
    });
  },
}

onChange(event) {
  this.setData({
    id: event.detail,
  });
},
onCancel() {
  this.setData({
    show: false
  });
},
onConfirm(event) {
  if(this.data.id.length > 0) {

    submit(this.data.id).then(res => {
      if(res.code ==200){
        wx.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000,
        })

        // 关闭
        this.onCancel()

      }else{
        wx.showToast({
          title: res.msg,
          icon: 'none',
          duration: 2000
        })
      }
    }).catch(err => {
      console.log(err)
    })

  } else {
    wx.showToast({
      title: '请至少选择一项',
      icon: 'none',
      duration: 2000
    })
  }
},