css仿el-tabs标签页效果

需求：el-tabs很多时候需要改间距或者下划线上还要加组件什么的比较麻烦，手写一个自己根据需求更改即可

1.效果

2.主要代码详解

主要代码如下：active是下划线，activeitem是选中后改变字体颜色， 'item-' + (index + 1),用item来区分获取当前文字对应的距离和宽度好计算下划线的位置

 <div class="tabs_wrap">
        <div
          v-for="(item, index) in tabsList"
          :key="item.value"
          :class="[
            'item',
            'item-' + (index + 1),
            { activeitem: currentIndex === index },
          ]"
          @click="changeIndex(index)"
        >
          {{ item.label || "" }}
        </div>
        <div class="active" :style="{ left: left + 'px' }"></div>
      </div>

 选中后设置的样式，active是一个块级元素

    .active {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50px;
      height: 2px;
      background: #409eff;
      border-radius: 50px;
      transition: left 0.3s ease;
    }
    .activeitem {
      color: #409eff;
    }

3.完整代码

<template>
  <div class="container fff">
    <div class="header">
      <span style="margin-right: 20px">项目</span>

      <el-select v-model="value" @change="projectChange" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="tabs_wrap">
        <div
          v-for="(item, index) in tabsList"
          :key="item.value"
          :class="[
            'item',
            'item-' + (index + 1),
            { activeitem: currentIndex === index },
          ]"
          @click="changeIndex(index)"
        >
          {{ item.label || "" }}
        </div>
        <div class="active" :style="{ left: left + 'px' }"></div>
      </div>
    </div>
    <div class="main"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      currentIndex: 0,
      left: 0,
      tabsList: [
        {
          label: "1分析",
          value: "1",
        },
        {
          label: "2分析",
          value: "2",
        },
        {
          label: "3分析",
          value: "3",
        },
        {
          label: "4分析",
          value: "4",
        },
      ],
    };
  },
  mounted() {
    this.initPostion(0);
  },
  methods: {
    initPostion(index) {
      let currentItem = document.querySelector(".item-" + (index + 1));
      let activeItem = document.querySelector(".active");
      console.log(currentItem.offsetWidth);
      console.log(activeItem.offsetWidth);

      // 计算下划线位置
      this.left =
        currentItem.offsetWidth * index +
        (currentItem.offsetWidth - activeItem.offsetWidth) / 2;
      console.log(this.left);
    },

    changeIndex(index) {
      if (this.currentIndex === index) return;

      this.currentIndex = index;
      this.initPostion(index);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  box-shadow: $base-box-shadow;
  padding: 10px 20px;
  .header {
    height: 60px;
    border-bottom: 1px solid #ebf3fc;
    display: flex;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #313035;
    .tabs_wrap {
      width: 500px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-around;
      // font-size: 14px;
      height: 60px;
      line-height: 60px;
    }

    .item {
      cursor: pointer;
      flex: 1;
      text-align: center;
    }
    .active {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50px;
      height: 2px;
      background: #409eff;
      border-radius: 50px;
      transition: left 0.3s ease;
    }
    .activeitem {
      color: #409eff;
    }
  }
  .main {
    width: 100%;
    // border: 1px solid red;
    height: calc(100% - 60px);
  }
}
</style>

文章到此结束，希望对你有所帮助~