element switch开关 将文字显示在按钮内部

2,032 阅读1分钟
<el-switch
    v-model="status"
    class="defineSwitch"
    inline-prompt
    active-text="开"
    inactive-text="关"
/>

主要是修改该控件自带样式

.defineSwitch{
  .el-switch__label--left {
    position: relative;
    left: 45px;
    color: #fff;
    z-index: -1111;
  }
  .el-switch__core{
    width: 50px!important;
  }
  .el-switch__label--right {
    position: relative;
    right: 46px;
    color: #fff;
    z-index: -1111;
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff!important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c!important;
  }
}