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 { ...... } }
上一篇:
IDEA上Java项目控制台中文乱码