• Switch 开关
    • 基本用法
    • 文字描述
    • 扩展的 value 类型
    • 禁用状态
    • Attributes
    • Events
    • Methods

    Switch 开关

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

    基本用法

    Switch 开关 - 图1

    绑定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>

    文字描述

    Switch 开关 - 图2

    使用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 类型

    Switch 开关 - 图3

    设置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>

    显示代码

    禁用状态

    Switch 开关 - 图4

    设置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 获取焦点 -

    原文: http://element-cn.eleme.io/#/zh-CN/component/switch