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

wujinxia

已于 2022-04-30 16:13:57 修改

阅读量3.3k

点赞数 9

分类专栏：微信小程序文章标签：微信小程序 vant weapp

于 2022-04-15 03:15:17 首次发布

本文链接：https://blog.youkuaiyun.com/wujinxia/article/details/124186053

版权

微信小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vant Weapp的Dialog组件中使用before-close钩子实现异步操作，阻止默认关闭，并提供了详细的代码示例。通过在beforeClose函数中返回Promise，可以控制弹窗在特定条件下的关闭行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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