van-dialog：“确认”验证失败时阻止对话框的关闭

最新推荐文章于 2024-07-12 10:00:51 发布

JXMChange

最新推荐文章于 2024-07-12 10:00:51 发布

阅读量6k

点赞数 7

分类专栏：前端 vant Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_37800258/article/details/118418829

版权

前端同时被 3 个专栏收录

19 篇文章

订阅专栏

Vue

9 篇文章

订阅专栏

vant

2 篇文章

订阅专栏

在Vue中，当使用van-dialog组件并需要在点击确认时进行验证时，可以利用:beforeClose回调函数来控制对话框的关闭。如果验证不通过，调用done(false)可以阻止对话框关闭。例如，在输入姓名验证场景中，当输入为空时显示提示并阻止关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

van-dialog

点击“确认”验证不通过时阻止对话框的关闭

点击“确认”验证不通过时阻止对话框的关闭

正常情况下，van-dialog组件点击“确认”时，对话框会自动关闭，但很多情况下点击“确认”时需要验证某些属性，待验证通过才能关闭对话框，此时则需要借助beforeClose回调函数：关闭前的回调函数，调用 done() 后关闭弹窗，调用 done(false) 阻止弹窗关闭

<van-dialog
  v-model="changeMemberNameDialogVisible"
  show-cancel-button
  get-container="body"
  class="m-changeMemberName-dialog m-dialog-common"
  :before-close="onBeforeClose"
  @confirm="changeMemberName"
>
  <div class="van-dialog__header">改名</div>
  <div class="van-dialog__connect">
    <input
      placeholder="请输入更改的名字"
      v-model="newMemberName"
      :maxLength="25"
    />
  </div>
</van-dialog>

onBeforeClose (action, done) {
  if (action === "confirm") {
    return done(false);
  } else {
    return done();
  }
},
changeMemberName () {
  if (this.newMemberName.trim().length == 0) {
    this.$Toast("请输入要修改的成员的新名称");
    return false;
  } else {
  	......
  }
}