elementUI中el-switch组件实现文字在按钮中显示

效果图：

1646909387.png

代码如下：

<el-switch
              class="switchStyle"
                v-model="status"
                :active-value="1"
                :inactive-value="0"
                active-text="上架"
                inactive-text="下架"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>


//css

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}

参考：http://www.bubuko.com/infodetail-2907237.html