el-switch 开关文字显示在开关里面

最新推荐文章于 2024-08-22 11:28:14 发布

码农阿茹

最新推荐文章于 2024-08-22 11:28:14 发布

阅读量1.2k

点赞数 1

文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/m0_69674158/article/details/128686411

版权

该文章展示了如何使用Vue.js的ElementUI库中的el-switch组件，通过v-model绑定值，active-color和inactive-color属性来定制开关状态的颜色，同时设置active-text和inactive-text改变开关的文字内容。此外，还使用CSS进行了文字位置和显示的调整，以及调整了开关和标签的宽度。

摘要由CSDN通过智能技术生成

提示：

active-color="#305BE7" active-text="开" 打开时的背景颜色和内容

inactive-color="#7D8294" inactive-text="关" 关闭时的背景颜色和内容

内容：

<el-switch

v-model="value2"

class="switch1"

active-color="#305BE7"

active-text="开"

active-value="00000000"

inactive-color="#7D8294"

inactive-text="关"

inactive-value="10000000">

</el-switch>

样式：

<style lang="scss" scoped>

::v-deep .el-switch__label {
position: absolute;
display: none;
color: #fff;
}
/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
z-index: 1;
right: 20px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
z-index: 1;
left: 42px;
}
/*显示文字*/
::v-deep .el-switch__label.is-active {
display: block;
}
::v-deep .el-switch .el-switch__core,
.el-switch .el-switch__label {
width: 55px;
}
</style>