码迷,mamicode.com
首页 > 其他好文 > 详细

记 elementui switch开关中显示文字问题

时间:2019-01-03 15:40:29      阅读:3217      评论:0      收藏:0      [点我收藏+]

标签:active   技术分享   nbsp   import   abs   span   port   img   ima   

我想要的效果

技术分享图片

 

官网提供的效果

技术分享图片

 

代码:

HTML

<el-table-column label="对市场公开" width="">
              <template slot-scope="scope">
                <el-switch class="switchStyle" v-model="scope.row.on" active-color="#7958b5" active-text="开" 
                 inactive-color="#e8e4f3" inactive-text="关">
                </el-switch>
              </template>
</el-table-column>

 

CSS

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

 

记 elementui switch开关中显示文字问题

标签:active   技术分享   nbsp   import   abs   span   port   img   ima   

原文地址:https://www.cnblogs.com/ymdzha/p/10214377.html

(2)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!