Element el-switch 开关详解

水深无声 2022-09-10 01:16 1209阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 值绑定
 *   *  2.1 默认值绑定
     *  2.2 指定绑定值
 *  3. 外观
 *   *  3.1 修改颜色
     *  3.2 修改显示文本
 *  4. 状态变化事件

# 1. 概述 #

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

# 2. 值绑定 #

## 2.1 默认值绑定 ##

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

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

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

效果如下：  
![在这里插入图片描述][36173d6d0c824bc6b8a2e4a7946270b5.png_pic_center]

## 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>

效果如下：  
![在这里插入图片描述][c725b44a61de4e909f636e153b212493.png_pic_center]

## 3.2 修改显示文本 ##

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

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

效果如下：  
![在这里插入图片描述][1bf27250f2434e9ea9232995a4565a3e.png_pic_center]

# 4. 状态变化事件 #

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

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

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[36173d6d0c824bc6b8a2e4a7946270b5.png_pic_center]: /images/20220829/ecb07021e4034360958eca4c36c77d78.png
[c725b44a61de4e909f636e153b212493.png_pic_center]: /images/20220829/9bd6219a729f40c4b92c641892d11b9f.png
[1bf27250f2434e9ea9232995a4565a3e.png_pic_center]: /images/20220829/137a6cde31e0453d99297ac1ff6c015e.png