ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【区分vue2和vue3下的element UI Switch 开关组件，分别详细介绍属性，事件 [打印本页]

---

作者: 玛卡巴卡的卡巴卡玛    时间: 2024-6-11 12:45
标题: 【区分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 组件没有直接提供方法）
示例：

1. <template>
2.   <el-switch
3.     v-model="value"
4.     active-color="#13ce66"
5.     inactive-color="#ff4949"
6.     @change="handleChange">
7.   </el-switch>
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       value: false,
15.     };
16.   },
17.   methods: {
18.     handleChange(val) {
19.       console.log(val); // 输出开关的当前状态
20.     },
21.   },
22. };
23. </script>

复制代码

Vue 3 的 Element Plus

在 Vue 3 的 Element Plus 中，el-switch 组件的大部门属性和事件与 Vue 2 的 Element UI 类似，但可能会有一些新增或调解的功能。你应该查阅 Element Plus 的官方文档以获取最新的信息。
示例（在 Vue 3 中利用 Composition API）：

1. <template>
2.   <el-switch
3.     v-model="value"
4.     active-color="#13ce66"
5.     inactive-color="#ff4949"
6.     @change="handleChange">
7.   </el-switch>
8. </template>
10. <script>
11. import { ref } from 'vue';
13. export default {
14.   setup() {
15.     const value = ref(false);
17.     const handleChange = (val) => {
18.       console.log(val); // 输出开关的当前状态
19.     };
21.     return {
22.       value,
23.       handleChange,
24.     };
25.   },
26. };
27. </script>

复制代码

在这个 Vue 3 的示例中，我们利用 Composition API 的 ref 函数来创建相应式的 value 变量。handleChange 方法与 Vue 2 中的示例类似，当开关状态厘革时，会打印出当前的状态值。
请注意，Element Plus 可能会添加一些新的属性或事件，或者对现有的属性和事件进行改进。因此，最好查阅 Element Plus 的官方文档以获取最精确的信息。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4