vant-weapp dialog弹层before-close的用法

熊叁(san)

已于 2023-07-27 15:46:28 修改

阅读量1.2k

点赞数 1

分类专栏：前端笔记文章标签：前端 vant-weapp before-close

于 2023-07-27 15:14:27 首次发布

本文链接：https://blog.youkuaiyun.com/littlebearGreat/article/details/131960775

版权

前端笔记专栏收录该内容

126 篇文章

订阅专栏

在VantWeApp的Dialog组件中，before-close事件绑定到data中的方法才能生效。正确做法是将方法赋值给data属性，并在beforeClose内使用箭头函数以保持正确的上下文。这样可以在用户点击取消时执行特定逻辑。

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

不得不说，真的坑呀。

vant-weapp dialog弹层before-close绑定方法不生效，绑定data中的方法才生效。正确的写法如下

<van-dialog 
    use-slot 
    title="弹层" 
    show="{{show}}" 
    before-close="{{beforeCloseFunction}}" 
>
</van-dialog>

Page({
    data: {
        show: false,
        beforeCloseFunction: null
    },

    onLoad() {
        this.setData({beforeCloseFunction: this.beforeClose()})
    },

    beforeClose() {
        // 这里一定要用箭头函数，否则访问不到this
        return (type) => {
            console.log(type)
            console.log(this.data)
            if (type === 'cancel') {
                // 点击取消
                return true
            }else {
                // 点击确定
            }
        }
    }
})