Element-UI的Switch 开关修改为字在按钮上

1、Element-UI的Switch 开关用法

http://element-cn.eleme.io/#/zh-CN/component/switch

2、修改后的示意图

3、样式修改

<template>
  <div>
    <el-switch
      v-model="value"
      width="46"
      active-value="0"
      inactive-value="1"
      active-text="开"
      inactive-text="关">
    </el-switch>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '0'
    };
  }
};
</script>

样式（修改Element-UI的Switch 开关的默认样式类）：

.el-switch__label--left{
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right{
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label.is-active{
  z-index: 1111;
  color: #fff;
}

4、打开关闭时的字体颜色不同

.el-switch__label--left{
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.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;
}

效果：