Vant-ui组件 Dialog里的before-close阻止关闭

这是vant官网的用法,写的很粗,下面讲一下自己的理解。Vant-ui组件 Dialog里的before-close阻止关闭_第1张图片
直接上代码

    <van-dialog
      v-model="isShowPwd"
      title="修改密码"
      show-cancel-button
      :before-close="onBeforeClose" // 绑定onBeforeClose事件
    >
async onBeforeClose(action, done) {
     
      if (action === "confirm") {
     
        if (this.suc.suc1 === true && this.suc.suc2 === true && this.suc.suc3 === true) {
     
          const data = {
      password: this.new2pwd }
          await this.set(data)
          this.oldpwd = this.newpwd = this.new2pwd = ''
          sessionStorage.clear()
          this.$router.replace('/login')
        } else {
     
          // done()里可以放true和false来控制
          this.$toast.fail('请认真填写信息')
          return done(false)
        }
      } else {
     
        this.oldpwd = this.newpwd = this.new2pwd = ''
        this.err.err1 = this.err.err2 = this.err.err2 = ''
        this.suc.suc1 = this.suc.suc2 = this.suc.suc3 = false
        return done()
      }
    }

函数有2个默认参数,里面可用逻辑来控制确定和取消按钮
这样就可以不用confirm,cancel事件了

action === "confirm" //表示点击确认,else为取消
done() // 关闭弹窗
done(false) // 阻止关闭弹窗

你可能感兴趣的:(Vue,vue)