Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

基本用法

基本用法.png
绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。

  1. <el-switch
  2.   v-model="value2"
  3.   active-color="#13ce66"
  4.   inactive-color="#ff4949">
  5. </el-switch>
  7. <script>
  8.   export default {
  9.     data() {
  10.       return {
  11.         value1: true,
  12.         value2: true
  13.       }
  14.     }
  15.   };
  16. </script>

文字描述

文字描述.png

使用active-text属性与inactive-text属性来设置开关的文字描述。

  1. <el-switch
  2.   v-model="value3"
  3.   active-text="按月付费"
  4.   inactive-text="按年付费">
  5. </el-switch>
  6. <el-switch
  7.   style="display: block"
  8.   v-model="value4"
  9.   active-color="#13ce66"
  10.   inactive-color="#ff4949"
  11.   active-text="按月付费"
  12.   inactive-text="按年付费">
  13. </el-switch>
  15. <script>
  16.   export default {
  17.     data() {
  18.       return {
  19.         value3: true,
  20.         value4: true
  21.       }
  22.     }
  23.   };
  24. </script>

扩展的 value 类型

扩展的value类型.png

设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

  1. <el-tooltip :content="'Switch value: ' + value5" placement="top">
  2.   <el-switch
  3.     v-model="value5"
  4.     active-color="#13ce66"
  5.     inactive-color="#ff4949"
  6.     active-value="100"
  7.     inactive-value="0">
  8.   </el-switch>
  9. </el-tooltip>
  11. <script>
  12.   export default {
  13.     data() {
  14.       return {
  15.         value5: '100'
  16.       }
  17.     }
  18.   };
  19. </script>

禁用状态

禁用状态.png

设置disabled属性，接受一个Boolean，设置true即可禁用。

  1. <el-switch
  2.   v-model="value6"
  3.   disabled>
  4. </el-switch>
  5. <el-switch
  6.   v-model="value7"
  7.   disabled>
  8. </el-switch>
  9. <script>
  10.   export default {
  11.     data() {
  12.       return {
  13.         value6: true,
  14.         value7: false
  15.       }
  16.     }
  17.   };
  18. </script>

Attributes

参数 说明 类型 可选值 默认值
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 — —

Events

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

Methods

|方法名| 说明 |参数|

|focus| 使 Switch 获取焦点| -|