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

預覽效果:

到此結束!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章