一、效果图
二、代码
<el-form-item label="状态" class="btnRow" style="width: 25%" required>
<el-switch
v-model="editForm.disabled"
:active-text="editForm.disabled ? '启用' : '禁用'"
></el-switch>
</el-form-item>
样式代码
.el-switch__label.is-active {
z-index: 9;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
position: absolute;
left: -4px;
}
.el-switch.is-checked .el-switch__core {
border-color: #4c7cee;
background: #4c7cee;
}
.el-switch__core {
width: 50px !important;
border: 1px solid #c5c5c5;
background: #c5c5c5;
}
.el-switch__label * {
font-size: 10px;
}
.el-switch__label--right {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
left: 10px;
top: -1px;
position: absolute;
}