el-switch 自定义样式

效果：

因为组件样式加上了scope 防止污染其他组件样式 所以需要使用/deep/来进行样式的修改
.switchStyle{
     /deep/ .el-switch__label {
            position: absolute;
            display: none;
            font-weight:normal;
        }
      /deep/ .el-switch__label *{
            font-size:12px;
        }
       /deep/ .el-switch__label--left {
            z-index: 9;
            left:22px;
            color: #fff;
        }
       /deep/ .el-switch__label--right {
            z-index: 9;
            color: #fff;
        }
       /deep/ .el-switch__label.is-active {
            display: block;
            height:30px;
            line-height:30px;
        }
    }
   /deep/ .switchStyle.el-switch .el-switch__core,.el-switch .el-switch__label {
        width:60px !important;
    }
    .el-switch,.el-switch__core{
        height:30px;
        line-height:30px;
    }
    .el-switch__core{
        border-radius:15px;
        &:after{
            width:20px;
            height:20px;
            top:4px;
            left:3px;
            z-index:10;
        }
    }
    .el-switch.is-checked .el-switch__core::after{
        margin-left:-23px;
    }