vue element-switch 支持在状态改变前拦截change事件

有时候在改变状态时需要进行校验，校验成功后才能改变值

组件代码如下（ts写法）

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Switch } from "element-ui";
/**
 *
 * element-switch组件增强,支持在状态改变前拦截change事件
 *
 * 用法和element-switch一样
 *
 * {Function} beforChange 同步拦截change事件
 *
 * {Function} beforPromiseChange 异步拦截change事件
 *
 */
@Component({
    // 继承element-switch
    extends: Switch,
    name: "ZbSwitch"
})
export default class ZbSwitch extends Vue {
    // 同步拦截change事件
    @Prop() beforChange!: Function;
    // 异步拦截change事件
    @Prop() beforPromiseChange!: Function;
    // 额外绑定的值
    @Prop() data!: any;
    // 重写方法,支持拦截状态改变
    handleChange() {
        const me = this as any,
            val = me.checked ? me.inactiveValue : me.activeValue,
            data = me.data;
        // 如果有配置beforChange那么return true才不会拦截后续动作
        if (me.beforChange) {
            if (me.beforChange(data)) {
                me.checkChange(val);
            }
        } else if (me.beforPromiseChange) {
            // 如果有配置beforPromiseChange那么resolve();才不会拦截后续动作
            me.beforPromiseChange(data).then(() => {
                me.checkChange(val);
            });
        } else {
            me.checkChange(val);
        }
    }
    // 拦截拦截状态改变后处理相关逻辑
    checkChange(val: any) {
        const me = this as any;
        // 抛出事件
        me.$emit("input", val);
        me.$emit("change", val);
        me.$nextTick(() => {
            // set input's checked property
            // in case parent refuses to change component's value
            me.$refs.input.checked = me.checked;
        });
    }
}
</script>

使用

<template>
    <div>
        <div class="bh bstart">
            同步拦截change事件:&emsp;
            <zb-switch
                v-model="value"
                :beforChange="onChange"
                :data="{ is: true }"
            ></zb-switch
            >&nbsp;通过&emsp;
            <zb-switch
                v-model="value"
                :beforChange="onChange"
                :data="{ is: false }"
            ></zb-switch
            >&nbsp;不通过
        </div>
        <br />
        <div class="bh bstart">
            异步拦截change事件:&emsp;
            <zb-switch
                v-model="value"
                :beforPromiseChange="onPromiseChange"
                :data="{ is: true }"
            ></zb-switch
            >&nbsp;通过&emsp;
            <zb-switch
                v-model="value"
                :beforPromiseChange="onPromiseChange"
                :data="{ is: false }"
            ></zb-switch
            >&nbsp;不通过
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import message from "@/utils/Message";
@Component({ name: "elementSwitch" })
export default class elementSwitch extends Vue {
    // 绑定值
    value: boolean = true;
    // 同步拦截，返回ture则通过验证
    onChange(data) {
        console.log("是否通过验证", data.is);
        return data.is;
    }
    // 异步拦截，返回resolve()则通过验证
    onPromiseChange(data) {
        message.loading("正在异步请求...");
        return new Promise((resolve) => {
            setTimeout(() => {
                console.log("是否通过验证", data.is);
                if (data.is) {
                    resolve({});
                }
                message.clear();
            }, 500);
        });
    }
}
</script>