把文字放在内部
<el-switch
class="switchStyle"
v-model="status"
:active-value="1"
:inactive-value="0"
active-text="ON"
inactive-text="OFF"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<el-switch
class="switchStyle" // 自己定义的class 下面的所有样式中前缀都是这个
v-model="status"
active-text="ON" //开关打开时候的文字
inactive-text="OFF" //开关关闭的时候文字
active-color="#13ce66" //开关打开时候的背景颜色
inactive-color="#ff4949"> //开关关闭时候的背景颜色
</el-switch>
//下面css是为了把文字放在按钮的上面
.switchStyle .el-switch__label {
position: absolute;
display: none;
color: #fff;
}
.el-switch__core{
background-color: rgba(166, 166, 166, 1) ;
}
.switchStyle .el-switch__label--left {
z-index: 9;
left: 20px;
}
.switchStyle .el-switch__label--right {
z-index: 9;
left: 4px;
}
.switchStyle .el-switch__label.is-active {
display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
width: 60px !important;
}