小程序Vant Weapp的Dialog使用before-close

结合使用了组件调用和异步关闭,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),就可以实现拦截

  • 9
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值