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

Z时代
2024-01-10
分类：综合

vue

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

组件代码如下（ts写法）

 1 <script lang="ts">
 2 import { Component, Vue, Prop } from "vue-property-decorator";
 3 import { Switch } from "element-ui";
 4 /**
 5  *
 6  * element-switch组件增强,支持在状态改变前拦截change事件
 7  *
 8  * 用法和element-switch一样
 9  *
10  * {Function} beforChange 同步拦截change事件
11  *
12  * {Function} beforPromiseChange 异步拦截change事件
13  *
14  */
15 @Component({
16     // 继承element-switch
17     extends: Switch,
18     name: "ZbSwitch"
19 })
20 export default class ZbSwitch extends Vue {
21     // 同步拦截change事件
22     @Prop() beforChange!: Function;
23     // 异步拦截change事件
24     @Prop() beforPromiseChange!: Function;
25     // 额外绑定的值
26     @Prop() data!: any;
27     // 重写方法,支持拦截状态改变
28     handleChange() {
29         const me = this as any,
30             val = me.checked ? me.inactiveValue : me.activeValue,
31             data = me.data;
32         // 如果有配置beforChange那么return true才不会拦截后续动作
33         if (me.beforChange) {
34             if (me.beforChange(data)) {
35                 me.checkChange(val);
36             }
37         } else if (me.beforPromiseChange) {
38             // 如果有配置beforPromiseChange那么resolve();才不会拦截后续动作
39             me.beforPromiseChange(data).then(() => {
40                 me.checkChange(val);
41             });
42         } else {
43             me.checkChange(val);
44         }
45     }
46     // 拦截拦截状态改变后处理相关逻辑
47     checkChange(val: any) {
48         const me = this as any;
49         // 抛出事件
50         me.$emit("input", val);
51         me.$emit("change", val);
52         me.$nextTick(() => {
53             // set input's checked property
54             // in case parent refuses to change component's value
55             me.$refs.input.checked = me.checked;
56         });
57     }
58 }
59 </script>

使用

 1 <template>
 2     <div>
 3         <div class="bh bstart">
 4             同步拦截change事件:&emsp;
 5             <zb-switch
 6                 v-model="value"
 7                 :beforChange="onChange"
 8                 :data="{ is: true }"
 9             ></zb-switch
10             >&nbsp;通过&emsp;
11             <zb-switch
12                 v-model="value"
13                 :beforChange="onChange"
14                 :data="{ is: false }"
15             ></zb-switch
16             >&nbsp;不通过
17         </div>
18         <br />
19         <div class="bh bstart">
20             异步拦截change事件:&emsp;
21             <zb-switch
22                 v-model="value"
23                 :beforPromiseChange="onPromiseChange"
24                 :data="{ is: true }"
25             ></zb-switch
26             >&nbsp;通过&emsp;
27             <zb-switch
28                 v-model="value"
29                 :beforPromiseChange="onPromiseChange"
30                 :data="{ is: false }"
31             ></zb-switch
32             >&nbsp;不通过
33         </div>
34     </div>
35 </template>
36 <script lang="ts">
37 import { Component, Vue } from "vue-property-decorator";
38 import message from "@/utils/Message";
39 @Component({ name: "elementSwitch" })
40 export default class elementSwitch extends Vue {
41     // 绑定值
42     value: boolean = true;
43     // 同步拦截，返回ture则通过验证
44     onChange(data) {
45         console.log("是否通过验证", data.is);
46         return data.is;
47     }
48     // 异步拦截，返回resolve()则通过验证
49     onPromiseChange(data) {
50         message.loading("正在异步请求...");
51         return new Promise((resolve) => {
52             setTimeout(() => {
53                 console.log("是否通过验证", data.is);
54                 if (data.is) {
55                     resolve({});
56                 }
57                 message.clear();
58             }, 500);
59         });
60     }
61 }
62 </script>