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;
}

效果：