van-dialog 组件调用 报错

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

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

文档上下都有详细说明

上面这个是vue2的写法

下面展示vue3语法糖

 

Dialog里的before-close阻止关闭

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

上网上找的代码

 <van-dialog
      v-model="isShowPwd"
      title="修改密码"
      show-cancel-button
      :before-close="onBeforeClose" // 绑定onBeforeClose事件
    >

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

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

<van-dialog
      v-model:show="showDia"
      :before-close="onBeforeClose"
      title="短信验证码"
      show-cancel-button>
      <van-cell-group inset>
        <van-field
          v-model="sms"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="primary">
              发送验证码
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-dialog>

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