Switch 开关

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

基本用法

Switch 开关 - 图1

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

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

显示代码

文字描述

Switch 开关 - 图2

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

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

显示代码

扩展的 value 类型

Switch 开关 - 图3

设置active-valueinactive-value属性,接受Boolean, StringNumber类型的值。

<el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>
</el-tooltip>

<script>
  export default {
    data() {
      return {
        value: '100'
      }
    }
  };
</script>

显示代码

禁用状态

Switch 开关 - 图4

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

<el-switch
  v-model="value1"
  disabled>
</el-switch>
<el-switch
  v-model="value2"
  disabled>
</el-switch>
<script>
  export default {
    data() {
      return {
        value1: true,
        value2: false
      }
    }
  };
</script>

显示代码

Attributes

参数说明类型可选值默认值
value / v-model绑定值boolean / string / number
disabled是否禁用booleanfalse
widthswitch 的宽度(像素)number40
active-icon-classswitch 打开时所显示图标的类名,设置此项会忽略 active-textstring
inactive-icon-classswitch 关闭时所显示图标的类名,设置此项会忽略 inactive-textstring
active-textswitch 打开时的文字描述string
inactive-textswitch 关闭时的文字描述string
active-valueswitch 打开时的值boolean / string / numbertrue
inactive-valueswitch 关闭时的值boolean / string / numberfalse
active-colorswitch 打开时的背景色string#409EFF
inactive-colorswitch 关闭时的背景色string#C0CCDA
nameswitch 对应的 name 属性string
validate-event改变 switch 状态时是否触发表单的校验boolean-true

Events

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

Methods

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