vue elementui el-switch按钮内显示文字

样式展示

代码如下

<el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#CBCBCB"
    active-text="无"
    inactive-text="有">
</el-switch>

::v-deep .el-dialog {
    border-radius: 13px;
    min-width: 500px;
}
::v-deep .el-switch__core {
    width: 50px !important;
    height: 24px;
    border-radius: 100px;
    border: none;
}
::v-deep .el-switch__core::after {
    width: 20px;
    height: 20px;
    top: 2px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
    margin-left: -21px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
    position: absolute;
    z-index: 1;
    right: 6px;
    margin-left: 0px;
    color: rgba(255, 255, 255, 0.9019607843137255);
    span {
        font-size: 13px;
        box-sizing: border-box;
        padding-right: 25px;
        color: #cbcbcb;
    }
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
    display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
    position: absolute;
    z-index: 1;
    left: 5px;
    margin-right: 0px;
    color: rgba(255, 255, 255, 0.9019607843137255);
    span {
        font-size: 13px;
        box-sizing: border-box;
        padding-left: 27px;
        color: #21af73;
    }
}