让ElementUI的switch组件文字显示在按钮上

switch原本的样式如图，文字显示在两边，感觉有歧义。我们想让开关打开的时候只显示未过期。

其实只要修改它的样式就可以达到我们要的效果。

首先给switch添加一个类名：

修改样式：

<style lang="scss">
// 自定义switch样式
.mySwitch {
  .el-switch__label--left {
    position: relative;
    left: 70px;
    color: #fff;
    z-index: -1111;
    span {
      width: 40px;
    }
  }
  .el-switch__label--right {
    position: relative;
    right: 70px;
    color: #fff;
    z-index: -1111;
    span {
      display: inline-block;
      width: 40px;
    }
  }
  .el-switch__core {
    width: 65px !important;
  }
  .el-switch__label--right.is-active {
    z-index: 10;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 10;
    color: #9c9c9c !important;
  }
}
</style>

注：

1.不要加scoped属性

2.上面的width和left根据自己需要修改