小程序-实战篇-dialog关闭前

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

最近在开发中，遇到了弹框关闭前，需要校验弹框内的必填字段，且弹框不能关闭只有全部填写才能关闭，弹框的按钮有“拒绝”和“同意”，点击任何一个的时候，都需要调取接口。用到了dialog的before-close方法。

dialog属性

参数	说明
confirm-button-text	确认按钮的文案
cancel-button-text	取消按钮的文案
confirm-button-color	确认按钮的字体颜色
cancel-button-color	取消按钮的字体颜色
before-close	关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise
confirm-button-text	确认按钮的文案

html代码

<van-dialog className="free-dialog" use-slot title="批量审核" show="{{ show }}" show-cancel-button
    confirm-button-open-type="onAgree" bind:onagree="onAgree" confirm-button-text="同意" cancel-button-text="拒绝"
    before-close="{{beforeClose}}">
    <van-icon name="cross" size="45rpx" bind:click="onClose" />
    <van-cell-group>
        <van-field label="审核人数" value="{{ result.length }}人" placeholder="审核人数" input-align="right" readonly />
        <van-field model:value="{{ reason }}" label="拒绝理由" type="textarea"
            autosize="{{ { maxHeight: 100, minHeight: 50 } }}" class="reason" size="large" show-word-limit
            maxlength="100" error-message="{{error}}" bind:change="onChangeReason" />
    </van-cell-group>
</van-dialog>

关键就是before-close="{{beforeClose}}"

• beforeClose 需要写到data中，支持promise方法

data: {
   beforeClose(action) {
        if (action === 'cancel') {
            if (!this.data.reason) {
                this.setData({
                    error: '请输入拒绝理由'
                })
                return false;
            }
        }
        return new Promise((resolve) => {
            setTimeout(() => {
                if (action === 'confirm') {
                    // 代码逻辑
                    this.multipleSubmit(1);
                } else {
                    if (this.data.reason) {
                        this.multipleSubmit(2);
                    } else {
                        this.setData({
                            error: '请输入拒绝理由'
                        })
                    }
                }
            }, 13);
        })
    },
}

根据文档把代码写好之后，很兴奋的去点击"拒绝"按钮了，却发现...

• 会发现控制台会报错，说data不可用，关键点就是需要在onload中将beforeClose绑定到this上

onLoad: function (options) {
    // 绑定事件
    this.setData({
        beforeClose: this.data.beforeClose.bind(this),
    })
},

• 这时候再点击拒绝按钮不会报错了，并且也有校验了