el-tabs修改样式

前序

• 在项目开发的时候难免遇到样式不符合需求的时候需要我们自己对样式进行修改，最近修改了一个tabs的样式简单记录一下。

• 当前页面样式

• 最终需要的效果如下图：

步骤：

• 横向铺满
• 右侧做出尖角
• 左侧做出缺角
• 处理首尾
• 修改颜色

横向铺满

• 由于用的tabs的类型是border-card的所以在el-tabs--border-card写的样式，全局样式可以写在一个div的里面，样式里写在这个div的class内以免影响其他需要使用原有样式的页面。

.el-tabs--border-card {
    min-width: 1000px;

    .el-tabs__nav {
      width: 100%;

      .el-tabs__item {
        height: 30px;
        line-height: 30px;
        width: calc(100% / 7);
      }
    }
  }

• 给el-tabs--border-card设置了1000px的最小宽度，可根据自己项目需求决定

• el-tabs__nav这个是el-tabs__item的父容器需要先给他设置宽度才能正常使用百分比

• 这里给每一个item设置的宽度直接除了一个总个数，如果其他地方使用兼容性就会很差，需要在其他地方再重新修改这个值，但是也没有想到更好的办法就直接这么处理了（也想过用flex后来还是放弃了）

右侧做出尖角

      .el-tabs__item:after {  
        content: ''; 
        border-left: 15px solid #393E4A;
        border-top: 15px solid transparent;  
        border-bottom: 15px solid transparent;  
        position: absolute;   
        right: -15px;   
        top: 0;
        z-index: 2;
      }

• 通过after设置尖角，z-index是为了不让被点击的前面一个的尖角被遮住

左侧做出缺角

       .el-tabs__item:before{  
        content: '';  
        display: block;
        border-left: 15px solid #2B2F3A;
        border-top: 15px solid #393E4A;  
        border-bottom: 15px solid #393E4A;  
        position: absolute;   
        left: 2px;   
        top: 0;  
      }

• 通过before设置出左侧缺角的形状left根据不同的宽度留出不同的间距

处理首尾部分

      .el-tabs__item:first-child:before{    
        display: none;    
      }
      
      .el-tabs__item:last-child:after{    
        display: none;
      }

• 通过first-child 与 last-child 来处理首尾

修改颜色

• 给 el-tabs__item 添加背景颜色
• 设置点击后的颜色

      .is-active {  
        background-color: #4B515E !important;  
      }

• 修改当前选中首尾颜色

      .is-active:before {  
        border-top-color: #4B515E;
        border-bottom-color: #4B515E;
      }
      
      .is-active:after{
        border-left: 15px solid #4B515E;
      }

• 之后根据需要修改一下文字颜色和大小就可以了，由于比较简单就不在这里写了