Element el-switch 开关详解

点此查看全部文字教程、视频教程、源代码

1. 概述

开关就是从两个选项中切换，其实也可以用单选按钮/复选框实现切换功能，但是开关有一个动态的切换效果，在某些场景用起来效果更佳。

2. 值绑定

2.1 默认值绑定

开关默认绑定布尔值，true、false分别对应开关的两个状态。

默认绑定布尔值
    <el-switch v-model="boolValue">
    </el-switch>

 data() {
    return {
      boolValue: true,
    }
  },

效果如下：

2.2 指定绑定值

也可以根据需求指定绑定的值：

指定绑定值
    <el-switch v-model="myValue" active-value="male" inactive-value="femael">
    </el-switch>

 data() {
    return {
      myValue: 'male'
    }
  },

3. 外观

3.1 修改颜色

可以通过active-color、inactive-color修改颜色。

  修改颜色
    <el-switch v-model="boolValue" active-color="green" inactive-color="red">
    </el-switch>

效果如下：

3.2 修改显示文本

可以通过active-text、inactive-text修改显示文本信息。

修改文字描述
    <el-switch v-model="boolValue" active-text="启用" inactive-text="关闭">>
    </el-switch>

效果如下：

4. 状态变化事件

当开关的状态发生变化时，可以通过@change指定对一个的事件处理函数。

  状态变化事件，参数为新状态的值！
    <el-switch v-model="boolValue" @change="switchChange">
    </el-switch>

 methods: {
    switchChange() {
      console.log(this.boolValue);
    }
  }