开关（Switch）

Element-UI 的开关组件用于在两种相互对立的状态间进行切换，常用于触发「开/关」功能。该组件具有多种配置选项，可用于自定义其外观和行为。

提示

开关（Switch）官方文档：https://element.eleme.cn/#/zh-CN/component/switch (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-switch> 标签创建一个开关。通过 v-model 绑定开关的值。

<template>
  <el-switch v-model="isSwitchOn"></el-switch>
</template>

<script>
export default {
  data() {
    return {
      isSwitchOn: false // 开关的初始状态
    };
  }
};
</script>

• v-model 绑定：开关的值通过 v-model 与 isSwitchOn 绑定。当用户切换开关时，isSwitchOn 会自动更新。
• 默认状态：在上面的例子中，开关的默认状态是 false，即关闭状态。
• 

Switch 属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
width	switch 的宽度（像素）	number	—	40
active-icon-class	switch 打开时所显示图标的类名，设置此项会忽略 active-text	string	—	—
inactive-icon-class	switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text	string	—	—
active-text	switch 打开时的文字描述	string	—	—
inactive-text	switch 关闭时的文字描述	string	—	—
active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false
active-color	switch 打开时的背景色	string	—	#409EFF
inactive-color	switch 关闭时的背景色	string	—	#C0CCDA
name	switch 对应的 name 属性	string	—	—
validate-event	改变 switch 状态时是否触发表单的校验	boolean	—	true

Switch 事件

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值

Switch 方法

方法名	说明	参数
focus	使 Switch 获取焦点	—

2. 常见开关示例

基础开关

通过 v-model 绑定值来实时更新开关状态。

<template>
  <el-switch v-model="isSwitchOn"></el-switch>
</template>

<script>
export default {
  data() {
    return {
      isSwitchOn: false // 开关的初始状态
    };
  }
};
</script>

• 基本使用：用户可以点击开关切换状态，isSwitchOn 将自动更新为开关的当前状态。
• 

带文字描述的开关

使用 active-text 和 inactive-text 属性为开关添加文字描述。

<template>
  <el-switch
    v-model="isSwitchOn"
    active-text="开启"
    inactive-text="关闭"
  ></el-switch>
</template>

• 文字描述：通过 active-text 和 inactive-text 属性为开关的两种状态添加描述文本。
• 

带图标的开关

使用 active-icon-class 和 inactive-icon-class 属性为开关添加图标。

<template>
  <el-switch
    v-model="isSwitchOn"
    active-icon-class="el-icon-check"
    inactive-icon-class="el-icon-close"
  ></el-switch>
</template>

• 图标展示：通过 active-icon-class 和 inactive-icon-class 属性为开关的两种状态添加不同的图标。
• 

自定义颜色的开关

使用 active-color 和 inactive-color 属性为开关设置自定义背景色。

<template>
  <el-switch
    v-model="isSwitchOn"
    active-color="#13ce66"
    inactive-color="#ff4949"
  ></el-switch>
</template>

• 自定义颜色：通过 active-color 和 inactive-color 属性为开关设置不同状态下的背景颜色。
• 

禁用状态的开关

使用 disabled 属性禁用开关。

<template>
  <el-switch v-model="isSwitchOn" disabled></el-switch>
</template>

• 禁用状态：通过 disabled 属性将开关设置为不可交互状态。
• 

3. 事件处理示例

监听状态变化事件

使用 change 事件监听开关状态变化。

<template>
  <el-switch v-model="isSwitchOn" @change="handleChange"></el-switch>
</template>

<script>
export default {
  data() {
    return {
      isSwitchOn: false // 开关的初始状态
    };
  },
  methods: {
    handleChange(value) {
      console.log('开关状态变为:', value);
    }
  }
};
</script>

• 事件监听：通过 change 事件监听开关状态的变化，并执行回调函数 handleChange。

总结

• 灵活的属性配置：通过 active-text、inactive-text、active-icon-class、inactive-icon-class 等属性自定义开关的显示。
• 丰富的事件处理：支持 change 事件，允许开发者在状态变化时进行自定义处理。
• 便捷的状态管理：通过 v-model 绑定值，可以轻松管理开关的状态，并与数据模型同步。