el-switch 文字
时间: 2025-06-24 20:36:27 浏览: 18
### 关于 el-switch 组件的文字配置与使用方法
`el-switch` 是 Element Plus 提供的一个用于切换状态的组件,支持多种自定义选项。其中涉及文字的相关配置主要包括 `active-text` 和 `inactive-text` 属性,分别用来设置开关处于开启和关闭状态下显示的文字。
以下是详细的说明以及示例:
#### 1. 基本文字配置
`active-text` 和 `inactive-text` 可以直接作为属性绑定到 `el-switch` 上,用于展示不同的文字描述。这些文字会在对应的开关状态中显示出来[^1]。
```html
<el-switch
v-model="value"
active-text="启用"
inactive-text="禁用">
</el-switch>
```
在此示例中,当 `v-model` 的值为真时,显示“启用”;反之,则显示“禁用”。
#### 2. 自定义样式下的文字配置
除了基础功能外,还可以通过 CSS 定义颜色来增强视觉效果。例如,在上面提到的例子中可以加入大小写控制的颜色变量[^2]。
```html
<el-switch
v-model="item.status"
inline-prompt
size="large"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
active-text="启用"
inactive-text="禁用"
@change="statusSwitchChange($event, item)">
</el-switch>
```
这里不仅设置了两种不同状态对应的颜色变化,还加入了较大尺寸(`size=large`)以便更好地呈现文字内容。
#### 3. 结合弹框确认逻辑中的文字应用
如果希望在用户更改开关前先询问其意图,则可以通过组合其他组件如 `el-popconfirm` 来完成此目标。此时同样可以在内部继续保留原有的文字设定方式[^3]。
```html
<template>
<div>
<el-popconfirm
title="确定要切换开关状态吗?"
confirm-button-text="确定"
cancel-button-text="取消"
@confirm="confirmChange"
@cancel="cancelChange">
<template #reference>
<el-switch
v-model="switchValue"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="已开"
inactive-text="已关" />
</template>
</el-popconfirm>
</div>
</template>
<script setup>
import { ref } from 'vue';
const switchValue = ref(false);
// ...其余函数省略...
</script>
```
在这个例子里面,“已开”代表激活后的标签名称而“已关”则表示未被选定时所展现出来的字样。
---
### 总结
综上所述,对于想要了解如何正确运用 `el-switch` 中有关文字部分的朋友来说,主要关注点在于两个方面——即明确指定好各自的文本表达形式 (`active-text`, `inactive-text`) 并合理搭配外观调整手段让界面更加友好直观。
阅读全文
相关推荐


















