van-dialog 组件调用 报错

vue3 vant 的dialog和别的插件不一样

组件调用 要引入组件才行 只import根本不行

文档上下都有详细说明

上面这个是vue2的写法

下面展示vue3语法糖

 

Dialog里的before-close阻止关闭

action：当 action === "confirm" 表示点击 确定 按钮，反之点击 取消
done：控制是否关闭d窗 done()关闭d窗，done(false)阻止关闭d窗(实际测试done没啥用)

上网上找的代码

async onBeforeClose(action, done) {
      if (action === "confirm") { // 点击确定走这里
        if (this.username && this.password) {
         // 登录成功
        } else {
          // 登录失败，阻止d窗关闭 
          // done()里可以放true和false来控制
          return done(false) // 阻止d窗关闭
        }
      } else { // 点击取消走这里
        done(true) // 关闭d窗, true可以省略
      }
    }

我自己的vue3 语法糖手机验证码代码也放上来

// 绑定回调事件
const onBeforeClose = (action:any) => {
  if (action === 'confirm') {
    console.log('确认')
  } else if (action === 'cancel') {
    console.log('取消')
    showDia.value = false
  }
}