elementUi switch 文字显示

效果：

 

官方：

<el-switch

                    v-model="hasOuters"

                     class="switchStyle"

                    active-color="#13ce66"

                    active-text="内"

                    active-value="0"

                    inactive-color="#708090"

                    inactive-text="外"

                    inactive-value="1"

                    @change ='changeInterOrExter()'>

                    </el-switch>

样式：

 

.switchStyle{

            .el-switch__label {

                position: absolute;

                display: none;

                color: #fff;

                font-weight: bold;

              }

              .el-switch__label--right {

                z-index: 1;

                right: -3px;

              }

              .el-switch__label--left {

                z-index: 1;

                left: 48%;

              }

              .el-switch__label.is-active {

                display: block;

              }

        }

        .switchStyle.el-switch .el-switch__core,

        .el-switch .el-switch__label {

          width: 50px !important;

        }