el-switch组件实现上架下架

【效果】

 

【代码】

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

【CSS】

<style lang="scss" scoped>
  .switchStyle{
    margin:100px;
    ::v-deep{
      .el-switch__label {
        position: absolute;
        display: none;
        color: #fff;
      }
      .el-switch__label--left {
        z-index: 9;
        left: 22px;
      }
      .el-switch__label--right {
        z-index: 9;
        left: -2px;
      }
      .el-switch__label.is-active {
        display: block;
      }
      .el-switch__core:after{
        top:3px;
      }
      .el-switch__label,
      .el-switch__core{
        width: 60px !important;
        height: 25px;
        line-height: 25px;
        border-radius: 200px;
      }
    }
  }
</style>