正常情况下,在vue项目中引用Switch开关中的文字描述都是以前以后显示如下图:
而有时会根据项目需求要把文字写在开关内部如下图:
只需修改样式即可:
<style lang="scss">
.switchStyle .el-switch__label {
position: absolute;
display: none;
color: #fff;
}
.switchStyle .el-switch__label--left {
z-index: 9;
left: 20px;
}
.switchStyle .el-switch__label--right {
z-index: 9;
left: -2px;
}
.switchStyle .el-switch__label.is-active {
display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
width: 60px !important;
}
</style>