element ui二次封装Switch，在按钮内显示文字

element ui二次封装Switch，在按钮内显示文字

实现以下效果

结构：

   <el-switch 
   style="display: block" 
   v-model="scope.row.fingerDisableStatus" 
   active-color="#00cc77" 
   class="switchStyle"
   inactive-color="rgb(204, 204, 204)"
   active-text="启用"
   inactive-text="禁用"
   :active-value="0" 
   :inactive-value="1" 
   @change="switchChangeFin(scope.row)"
   >
   </el-switch>

样式：

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #ffffff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
  top: 0
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}