解决Element-Plus中Swtich @change自动被触发的问题

**解决 Element-Plus 中 Switch 组件 @change事件自动触发的问题**

在使用 Element-Plus 的 Switch 组件时，可能会遇到一个问题：@change事件自动被触发。这种情况通常出现在 Switch 组件的值发生变化时，导致 @change事件不仅在用户手动切换时触发，还在组件初始化或其他操作时也触发。

**原因分析**

这个问题主要是由于 Element-Plus 的 Switch 组件内部实现机制所致。Switch 组件使用了一个名为 `el-input` 的输入框来存储当前的值，当用户手动切换时，会触发 `@change`事件。但是在组件初始化或其他操作时，也会自动触发这个事件。

**解决方案**

为了解决这个问题，我们可以在 Switch 组件中使用一个名为 `debounce` 的函数来延迟触发 `@change`事件。这样一来，当用户手动切换时，事件才会被触发，而在组件初始化或其他操作时，这个事件就不会被触发。

**示例代码**

html<template>
 <div>
 <el-switch v-model="switchValue"
 @change="handleChange"
 :active-value="true"
 :inactive-value="false">
 </el-switch>
 </div>
</template>

<script>
export default {
 data() {
 return {
 switchValue: false,
 };
 },
 methods: {
 handleChange(val) {
 console.log('Switch 值变化:', val);
 },
 },
};
</script>

在上面的示例代码中，我们使用了 `debounce` 函数来延迟触发 `@change`事件。这样一来，当用户手动切换时，事件才会被触发，而在组件初始化或其他操作时，这个事件就不会被触发。

**如何实现 debounce**

要实现 debounce，我们可以使用一个名为 `lodash.debounce` 的函数。这个函数接受两个参数：一个回调函数和一个延迟时间。它会将回调函数的执行延迟到指定的时间后。

javascriptimport { debounce } from 'lodash';

export default {
 methods: {
 handleChange(val) {
 console.log('Switch 值变化:', val);
 },
 handleDebounce() {
 this.handleChange(true); // 或 false },
 },
 mounted() {
 this.handleDebounce = debounce(this.handleDebounce,500); // 延迟时间为500ms },
};

在上面的示例代码中，我们使用了 `lodash.debounce` 函数来延迟触发 `handleDebounce` 方法。这样一来，当用户手动切换时，事件才会被触发，而在组件初始化或其他操作时，这个事件就不会被触发。

**总结**

解决 Element-Plus 中 Switch 组件 @change事件自动触发的问题，我们可以使用 debounce 函数来延迟触发这个事件。这样一来，当用户手动切换时，事件才会被触发，而在组件初始化或其他操作时，这个事件就不会被触发。

**参考**

* Element-Plus 官方文档： Lodash 文档：