el-switch在按钮内加文字内嵌文字

产品需求：在按钮内内嵌对应操作文字

原生展示效果：

升级展示效果：

解决方案

按钮

<el-switch v-model="fieldForm.state" class="main-el-switch" active-text="开启" 　　inactive-text="关闭"></el-switch>

css

::v-deep .main-el-switch {
    position: relative;

    .el-switch__core {
        height: 24px;
        border-radius: 12px;
        min-width: 65px;
        &:after {
            left: 4px;
            top: 3px;
        }
    }

    &.el-switch {
        &.is-checked {
            .el-switch__core {
                &:after {
                    margin-left: -20px;
                    left: 100%;
                }
            }
        }
    }

    &.is-checked {
        .el-switch__label--left {
            opacity: 0;
        }

        .el-switch__label--right {
            opacity: 1;
        }
    }

    .el-switch__label {
        position: absolute;
        top: 0;
    }

    .el-switch__label--left {
        right: 0;
        color: #999;
        z-index: 1;
        margin-right: 8px;
    }

    .el-switch__label--right {
        left: 0;
        color: #fff;
        opacity: 0;
        margin-left: 8px;
    }
}