ElementUI 修改开关样式

1. 开关上显示文字

<el-switch
    v-model="form.status"
    class="switch_boxauth_style"
    :active-value="1"  
    :inactive-value="0"
    active-text="已出库"
    inactive-text="未出库"
/>

2. 只有上面的html是不行的，需要调节下样式, style 上不能带scoped， 带上不起作用

<style lang='scss'>
.switch_boxauth_style .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switch_boxauth_style .el-switch__label--left {
  z-index: 9;
  left: 22px;
}
.switch_boxauth_style .el-switch__label--right {
  z-index: 9;
  left: -4px;
}
.switch_boxauth_style .el-switch__label.is-active {
  display: block;
  color: #fff;
}
.switch_boxauth_style.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 70px !important;
}
</style>

3. 效果图