Elementui---開關顯示文字【完美解決】

在使用Elementui開發項目的時候，在表單頁面會用到開關，類比其他UI框架，如果開關能夠顯示文字，對於用戶理解有很大的幫助。所以優化了下這個功能：

<el-switch class="main-switch" width="60"
  :active-value="1" 
  :inactive-value="0" 
  v-model="switchValue1" 
  inactive-text="禁止" 
  active-text="啟用">
</el-switch>

樣式：把原來的開關大小調大了一些

.main-switch{position: relative;}
.main-switch .el-switch__core{height: 24px; border-radius: 12px;}
.main-switch .el-switch__core:after{left: 4px;}
.main-switch.el-switch.is-checked .el-switch__core::after{margin-left: -20px;}
.main-switch .el-switch__core:after{top: 3px;}
.main-switch .el-switch__label{position: absolute; top: 0;}
.main-switch .el-switch__label--left{right: 0; color: #999; z-index: 1; margin-right: 8px;}
.main-switch .el-switch__label--right{left: 0; color: #fff; opacity: 0; margin-left: 8px;}
.main-switch.is-checked .el-switch__label--left{opacity: 0;}
.main-switch.is-checked .el-switch__label--right{opacity: 1;}

預覽效果：

到此結束！