前言
由于switch是放在table里的,如果文字放在外面,样式会比较不好看。如果单独写一个浪费造轮子,我们直接动态添加类名,应该可以实现类似的效果,所以就可以使用伪类进行添加文字。
效果
源码
<el-switch
:width="60"
:value="getTaskSubscribeState(row)"
active-color="#3399FF"
inactive-color="#CCCCCC"
active-value="1"
inactive-value="0"
:class="{
'switch-is-actived': getTaskSubscribeState(row) === '1',
}"
>
</el-switch>
.el-switch {
/deep/ .el-switch__core {
&::before {
content: '关闭';
color: #fff;
position: absolute;
// font-size: 14px;
transform: scale(0.85);
left: 20px;
}
}
&.switch-is-actived {
/deep/ .el-switch__core {
&::before {
content: '开启';
left: 10px;
transform: scale(0.85);
}
}
}
}