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 {
          
   
  	......
  }
}
经验分享 程序员 微信小程序 职场和发展