在使用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;}
預覽效果:
到此結束!