【区分vue2和vue3下的element UI Switch 开关组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，el-switch（开关组件）提供了类似的属性和事件，但可能存在一些细微的差别或新增的功能。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中的 el-switch 组件的属性、事件和如何使用它们，并给出示例。

Vue 2 的 Element UI

el-switch

属性：

• v-model / value：绑定值，true 为开，false 为关
• disabled：是否禁用
• active-color：开关打开时的背景色
• inactive-color：开关关闭时的背景色
• active-text：开关打开时的文字
• inactive-text：开关关闭时的文字
• active-value / inactive-value：在表单中使用的值，分别对应打开和关闭状态的值，默认为 true/false
• name：原生属性 name
• validate-event：是否触发表单的验证，默认为 true
• width：开关的宽度（单位 px）

事件：

• change：开关状态变化时触发

方法（Element UI 的 el-switch 组件没有直接提供方法）

示例：

<template>
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @change="handleChange">
  </el-switch>
</template>

<script>
export default {
  data() {
    return {
      value: false,
    };
  },
  methods: {
    handleChange(val) {
      console.log(val); // 输出开关的当前状态
    },
  },
};
</script>

Vue 3 的 Element Plus

在 Vue 3 的 Element Plus 中，el-switch 组件的大部分属性和事件与 Vue 2 的 Element UI 相同，但可能会有一些新增或调整的功能。你应该查阅 Element Plus 的官方文档以获取最新的信息。

示例（在 Vue 3 中使用 Composition API）：

<template>
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @change="handleChange">
  </el-switch>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref(false);

    const handleChange = (val) => {
      console.log(val); // 输出开关的当前状态
    };

    return {
      value,
      handleChange,
    };
  },
};
</script>

在这个 Vue 3 的示例中，我们使用 Composition API 的 ref 函数来创建响应式的 value 变量。handleChange 方法与 Vue 2 中的示例类似，当开关状态变化时，会打印出当前的状态值。

请注意，Element Plus 可能会添加一些新的属性或事件，或者对现有的属性和事件进行改进。因此，最好查阅 Element Plus 的官方文档以获取最准确的信息。