前言
该问题官方文档已经给出了解决方案,即
beforeClose
属性,但是描述有些晦涩。
本文来演示一下正确的使用方法,
点击确定后并不会关闭模态框,如下图所示:
解决方案
代码只保留了核心代码,无用配置没有写出来,方便您观察。
在组件上绑定before-close
属性,属性值为一个函数。
<van-dialog :before-close="onBeforeClose">...</van-dialog>
/*** 阻止模态框关闭* @description 根据操作判断* @param {String} action - 是确定还是取消* @param {Function} done - 操作函数* @return Function*/onBeforeClose(action, done) {// 点击了确定按钮if (action === "confirm") {// if()...也可以加入一些条件return done(false);//直接return它即可阻止}// 点击了取消按钮else {done(true); //关闭弹窗, true可以省略}}
Vant 2 - 解决 Dialog 弹出框组件点击 “确定“ 按钮后 模态框消失隐藏了(beforeClose 关闭前回调的使用 可阻止关闭)