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>