参考:https://vant-ui.github.io/vant-weapp/#/dialog
使用属性:props --> before-close
通过官方文档可以看出,before-close 是一个属性(Props),而不是暴露出来的事件(Events),所以只要按照属性的方式定义before-close对应的函数,便可以在关闭对话框之前做一些校验,校验通过之后才可以关闭对话框。
1、wxml
<van-dialog
show-cancel-button
before-close="{{onBeforeClose}}"
show-cancel-button
bind:cancel="onDialogClose"
bind:confirm="confirm"
custom-class="dialog"
>
...
</van-dialog>
2、定义 onBeforeClose 属性
data: {
onBeforeClose: (action) => {
return true;
},
},
3、在确认事件里面修改 onBeforeClose
confirm() {
const isValid = false;
if (!isValid ) {
this.setData({
onBeforeClose: (action) => {
if (action === "confirm") {
return false;
}
return true;
},
});
return;
}
this.setData({
onBeforeClose: () => {
return true;
},
});
},
以上便可以实现:点击对话框的确定之后,当 isValid 为 true 时才可以关闭对话框,否者对话框将不会关闭。