问答

element tabs标签页样式修改

作者:admin 2021-06-07 我要评论

想要去掉标签页中的侧边样式要怎么实现 ### // 1.在el-tabs 标签上加个 class="tab-item".tab-item /deep/ .el-tabs__nav-wrap::after { height: 0;} ### 找到样...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png
想要去掉标签页中的侧边样式要怎么实现

###
// 1.在el-tabs 标签上加个 class="tab-item"
.tab-item /deep/ .el-tabs__nav-wrap::after {
    height: 0;
}
###

找到样式 隐藏掉

###
<style>
.你的页面class .el-tabs__active-bar{
  background-color: transparent;
}
</style>

image.png

在你页面加样式,注意不要用scoped

###

修改element-ui组件样式需要在全局模式中修改才能生效,或利用行内样式在标签中添加所需样式
`<style lange="less">

.el-tabs_active-bar {
    background: none
}

</style>`
也可以直接在App.vue<style></style>添加要修改的样式
注意不要污染其他页面中的tag,最好在样式最外层加上本页面最外层的class

###

添加新的class="tabs-newcon"
.tabs-newcon /deep/{

.el-tabs__active-bar{
  background: transparent;
}
.el-tabs__nav-wrap::after {
  height: 0;
}

}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • element tabs标签页样式修改

    element tabs标签页样式修改

  • 淘宝使用的是前后端分离吗

    淘宝使用的是前后端分离吗

  • 前后端分离+Spring Cloud 项目怎样部署

    前后端分离+Spring Cloud 项目怎样部署

  • docker+jenkins部署vue项目,为什么doc

    docker+jenkins部署vue项目,为什么doc

腾讯云代理商
海外云服务器