相信很多人都会有这样的需求
但是自从Element UI 弃用了on-text和off-text 以后，怎么把文字放在开关内显示呢，这里提供一种解决方案。
关于el-switch的官方文档
从文档中我们可以看到，现在想要让文字显示对应开关的操作只能用 active-text 和 inactive-text 。
<el-switch
v-model="value1"
active-text="是"
inactive-color="#BFBFBF" //因为用的框架active-color已经有主题色了所以这里只设置inactive的颜色，为了让文字显示的更明显。
inactive-text="否"
active-value="1"
inactive-value="0"
@change="test" />
在styles中新建一个switch.scss的样式文件，并在index中引入。
通过改变文字的位置，做出这种好像是在开关上面显示文字的效果。
.el-switch__label {
position: absolute;
display: none;
font-size: 11px !important;
color: #fff!important;
}
.el-switch__label *{
font-size: 11px !important;
}
/*打开时文字位置设置*/
.el-switch__label--right {
z-index: 1;
right: -10px; // 这里是重点
top: 0.5px;
}
/*关闭时文字位置设置*/
.el-switch__label--left {
z-index: 1;
left: 23px; // 这里是重点
top: 0.5px;
}
/*显示文字*/
.el-switch__label.is-active {
display: block;
}
.el-switch__core {
width: 45px;
height: 22px;
border: 2px solid #DCDFE6;
border-radius: 13px;
}
至此大功告成了，觉得对你有帮助的话，不妨随手点个赞再走吖~
