产品需求:在按钮内内嵌对应操作文字
原生展示效果:
升级展示效果:
解决方案
按钮
<el-switch v-model="fieldForm.state" class="main-el-switch" active-text="开启" inactive-text="关闭"></el-switch>
css
::v-deep .main-el-switch {
position: relative;
.el-switch__core {
height: 24px;
border-radius: 12px;
min-width: 65px;
&:after {
left: 4px;
top: 3px;
}
}
&.el-switch {
&.is-checked {
.el-switch__core {
&:after {
margin-left: -20px;
left: 100%;
}
}
}
}
&.is-checked {
.el-switch__label--left {
opacity: 0;
}
.el-switch__label--right {
opacity: 1;
}
}
.el-switch__label {
position: absolute;
top: 0;
}
.el-switch__label--left {
right: 0;
color: #999;
z-index: 1;
margin-right: 8px;
}
.el-switch__label--right {
left: 0;
color: #fff;
opacity: 0;
margin-left: 8px;
}
}