结合使用了组件调用和异步关闭,vant官方文档好像没有考虑过这个问题,参考了大佬的写法
小程序 van-dialog确认时阻止弹窗关闭
Vant/Weapp/Dialog/before-close的用法
vant weapp Dialog中组件调用beforeClose这个是这么用的?
Vant-ui组件 Dialog里的before-close阻止关闭(参考before-close的回调函数的写法)
wxml中
<van-dialog
use-slot
slot=""
z-index="10"
title="{{ dialogTitle }}"
show="{{ dialogShow }}"
before-close="{{beforeClose}}"
show-cancel-button
>
//弹窗的内容
</van-dialog>
因为写了befor-close,所以不需要点击关闭和点击确认的函数
bind:close=“onClose”
bind:confirm=“onConfirm”
js中
Page({
data: {
dialogTitle: '',
dialogShow: false,
beforeClose: {},
dialogConfirm: 0 //为0的时候不能关闭弹窗
},
onLoad: function (options) {
var that = this
that.setData({
beforeClose: (action) => this.onBeforeClose(action)
})
},
onBeforeClose: function(action) {
return new Promise((resolve) => {
setTimeout(() => {
var houseName = that.data.houseValue
if (action === 'confirm') {
this.onConfirm()
var dialogConfirm = this.data.dialogConfirm
if( dialogConfirm === 0 ){
resolve(false)
}else{
resolve(true)
}
} else {
// 拦截取消操作
this.onClose()
resolve(false)
}
}, 500)
})
},
})
在需要的条件里面加上resolve(true),实测不加上resolve(true),好像不可以关闭…
需要拦截的条件中加上resolve(false),就可以实现拦截