element-ui el-tabs el-tab-pane 的使用

最新推荐文章于 2024-05-31 22:15:00 发布

努力搬砖的小码

最新推荐文章于 2024-05-31 22:15:00 发布

阅读量943

点赞数 9

分类专栏： element-ui 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_63199745/article/details/138199434

版权

element-ui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文主要介绍了如何通过HTML和CSS调整el-tabs组件的样式，包括移除下划线、更改标签切换线条颜色，以及设置字体和鼠标交互效果。同时，还提到处理数据溢出时的滑动标签功能和使用小技巧快速定位代码部分。

摘要由CSDN通过智能技术生成

实现效果：1、去掉它的下划线

2、标签切换的蓝色线条

3、字体，鼠标滑过字体、点击的字体

4、如果数据超出，出现左右滑动标签

html

     <div class="activity">
         <div class="cont">
            <el-tabs
              v-if="search && search.length > 0"
              v-model="first"
              @tab-click="handleClick"
            >
               <el-tab-pane
            v-for="(item, index) in search"
            :key="index"
            :label="item.category_name"
            :name="item.id"
            :lazy="true"
            >
              </el-tab-pane>

    </el-tabs>
         </div>
      </div>

css

  .activity{
     width:98%;
     height:58px;
     background-color: #ffffff;
     margin:0 auto;
     margin-top: 34px;
     display: flex;
     align-items: center;
     position: relative;
     i{
      font-size: 25px;
      color:#2d97ff
     }
     .lefts{
       position: absolute;
       left:18px
     }
     .rights{
         position: absolute;
         right:18px
     }
     .cont{
      width:100%;
      height:100%;
      margin:  0 auto;
      display: flex;
      flex-direction:row;
      font-size: 20px;
      color: #c8c8c8;
      span{
         display: inline-block;
         height: 100%;
         display: flex;
         align-items: center;
         padding-left: 10px;
         padding-right: 10px;
         margin-right: 18px;
         font-size: 20px;
      }
     }
   }
   ::v-deep {
    .el-tabs {
      height: 100%;
      overflow: hidden;
      display: flex;
      overflow: hidden;
      flex-direction: column;
      .el-tabs__active-bar{
            background-color:transparent !important;
         }
      .el-tabs__header {
        padding: 0 5px;
        height: 100%;
        margin: 0;
        .el-tabs__nav-scroll {
          height: 58px;
          .el-tabs__nav {
            width: auto;
            display: flex;
            justify-content: space-between;
          }
          .el-tabs__item {
            height: 58px;
            font-weight: 400;
            font-size: 20px;
            padding: 0px 22px;
            line-height: 58px;
            margin-right: 42px;
            color:#666666;
            margin-left: 18px;
          }
          .el-tabs__item:hover{
            color: #3299ff;
          }
     
          .el-tabs__item.is-active {
            background-color: #0387fd;
            color:white;
            border:none
          }
        }
        .el-tabs__nav-prev,
        .el-tabs__nav-next {
          .el-icon-arrow-left,
          .el-icon-arrow-right {
            font-size: 20px;
            color:#0387fd;
            line-height: 58px;
            font-weight: 600;
          }
        }
      }
      .el-tabs__content {
        flex: 1;
        padding: 0;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        border-top: 11px solid #f0f2f5;
        .el-tab-pane {
          flex: 1;
          padding: 0;
          display: flex;
          overflow: hidden;
          flex-direction: column;
        }
      }
    }
  }