el-switch 是 Element Plus 框架中的一个组件，用于表示一个布尔值的选择开关。用户可以通过点击开关在两个状态之间切换。el-switch 提供了丰富的配置选项，包括自定义开关值、颜色、文字、图标等，使其能够灵活地适应各种应用场景。
一。自定义大小
改变框的大小：：deep（.el-switch__core）
改变字体大小：：deep（.el-switch--large .el-switch__label *）
二。属性
-
v-model / model-value:
- 用途: 双向绑定开关的状态。
-
active-value:
- 用途: 开关打开时的值。
- 默认值:
true
-
inactive-value:
- 用途: 开关关闭时的值。
- 默认值:
false
-
active-color:
- 用途: 开关打开时的背景颜色。
- 默认值:
#409EFF
-
inactive-color:
- 用途: 开关关闭时的背景颜色。
- 默认值:
#C0CCDA
-
active-text:
- 用途: 开关打开时的文字。
-
inactive-text:
- 用途: 开关关闭时的文字。
-
active-icon-class:
- 用途: 开关打开时的图标类名。
-
inactive-icon-class:
- 用途: 开关关闭时的图标类名。
-
width:
- 用途: 设置开关的宽度。
- 默认值:
40
-
disabled:
- 用途: 是否禁用该开关。
- 默认值:
false
-
loading:
- 用途: 是否显示加载状态。
- 默认值:
false
-
name:
- 用途: 开关的名称，主要用于表单提交。
- 默认值:
—
-
validate-event:
- 用途: 是否在输入框失去焦点时触发表单验证。
- 默认值:
true
-
before-change:
- 用途: 切换前的回调函数，返回
false或者返回Promise对象并reject时，可以阻止切换。
- 用途: 切换前的回调函数，返回
三。实例
<template>
<div>
<h2>Switch 示例</h2>
<!-- 基本用法 -->
<el-switch v-model="basicValue"></el-switch>
<!-- 使用 v-model 进行双向数据绑定 -->
<!-- 自定义开关值 -->
<el-switch v-model="customValue" active-value="on" inactive-value="off"></el-switch>
<!-- active-value 和 inactive-value 分别设置开关打开和关闭时的值 -->
<!-- 自定义颜色 -->
<el-switch v-model="colorValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
<!-- active-color 和 inactive-color 分别设置开关打开和关闭时的背景颜色 -->
<!-- 自定义文字 -->
<el-switch v-model="textValue" active-text="开启" inactive-text="关闭"></el-switch>
<!-- active-text 和 inactive-text 分别设置开关打开和关闭时的文字 -->
<!-- 自定义图标 -->
<el-switch v-model="iconValue" active-icon-class="el-icon-check" inactive-icon-class="el-icon-close"></el-switch>
<!-- active-icon-class 和 inactive-icon-class 分别设置开关打开和关闭时的图标类名 -->
<!-- 设置宽度 -->
<el-switch v-model="widthValue" :width="60"></el-switch>
<!-- width 属性设置开关的宽度 -->
<!-- 禁用状态 -->
<el-switch v-model="disabledValue" disabled></el-switch>
<!-- disabled 属性设置为 true 时，开关将被禁用 -->
<!-- 加载状态 -->
<el-switch v-model="loadingValue" loading></el-switch>
<!-- loading 属性设置为 true 时，开关将显示加载状态 -->
<!-- 名称 -->
<el-switch v-model="nameValue" name="exampleName"></el-switch>
<!-- name 属性设置开关的名称，主要用于表单提交 -->
<!-- 验证事件 -->
<el-switch v-model="validateEventValue" :validate-event="false"></el-switch>
<!-- validate-event 属性设置是否在输入框失去焦点时触发表单验证 -->
<!-- 切换前的回调函数 -->
<el-switch v-model="beforeChangeValue" @before-change="handleBeforeChange"></el-switch>
<!-- before-change 属性设置切换前的回调函数 -->
<!-- 当前值展示 -->
<p>当前值: {{ basicValue }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 基本值
const basicValue = ref(false)
// 自定义开关值
const customValue = ref('off')
// 自定义颜色
const colorValue = ref(false)
// 自定义文字
const textValue = ref(false)
// 自定义图标
const iconValue = ref(false)
// 设置宽度
const widthValue = ref(false)
// 禁用状态
const disabledValue = ref(false)
// 加载状态
const loadingValue = ref(false)
// 名称
const nameValue = ref(false)
// 验证事件
const validateEventValue = ref(false)
// 切换前的回调函数
const beforeChangeValue = ref(false)
const handleBeforeChange = (value) => {
// 返回 false 或者返回 Promise 并 reject 时，可以阻止切换
if (value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 2000)
})
}
return true
}
</script>
