[JavaScript知识库]kl - tab vue导航栏实现(底部线动画）

示例

使用

<template>
  <div class="demo">
    <kl-tab :tabOptions="tabOptions" @change="changeCom" />
    <div class="main">
      <component :is="activeName"></component>
    </div>
  </div>
</template>

<script>
import headersFrom from './headers_from.vue';
import formSynthesis from './form_synthesis.vue';
import rowMerge from './row_merge.vue';
export default {
  name: 'demo',
  components: { headersFrom, formSynthesis, rowMerge },
  data() {
    return {
      activeName: 'headersFrom',
      tabOptions: [
        {
          comName: 'headersFrom',
          tabName: '多级表头'
        },
        {
          comName: 'rowMerge',
          tabName: '行合并'
        },
        {
          comName: 'formSynthesis',
          tabName: '综合'
        }
      ]
    };
  },
  methods: {
    changeCom(name) {
      this.activeName = name;
      console.log(name);
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20px 0;
}
</style>

实现

<template>
  <div class="kl-tab">
    <div class="kl-table-line"></div>
    <div
      v-for="(item, index) in tabOptions"
      :key="item.comName"
      :class="[activeName === item.comName ? 'tab-active' : '', 'kl-tab-pane']"
      @click="changeTable(index)"
    >
      {{ item.tabName }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: {
    tabOptions: {
      type: Array,
      default: []
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentTabWidth: 56,
      tablePaneArr: [], // table-plan的宽
      currentTabIndex: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 获取 所有tab-plan 的宽
      let els = document.querySelectorAll('.kl-tab > .kl-tab-pane');
      if (els && els.length > 0) {
        els.forEach((item) => {
          this.tablePaneArr.push(item.offsetWidth);
        });
      }

      this.setLinePos();
    });
  },
  methods: {
    // 切换tab
    changeTable(index) {
      this.activeName = this.tabOptions[index].comName;
      // 底部下划线
      this.setLinePos();
      this.$emit('change', this.activeName);
    },
    // 设置下面标签的位置
    setLinePos() {
      // 拿到当前激活的table的宽

      this.currentTabIndex = this.tabOptions.findIndex((item) => {
        return item.comName === this.activeName;
      });

      if (!this.activeName && this.currentTabIndex === -1) {
        this.currentTabIndex = 0;
      }
      this.currentTabWidth = this.tablePaneArr[this.currentTabIndex];

      let el = document.querySelector('.kl-table-line');
      if (el) {
        el.style.width = this.currentTabWidth + 'px';
        let leftWidth = 0;
        this.tablePaneArr.forEach((item, index) => {
          if (index < this.currentTabIndex) {
            leftWidth = item + leftWidth;
          }
        });

        el.style.left = leftWidth + 20 * this.currentTabIndex + 'px';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.kl-tab {
  display: flex;
  cursor: pointer;
  position: relative;
  height: 50px;
  border-bottom: 2px solid #ccc;

  .kl-table-line {
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 40px;
    background-color: #409eff;
    transition: all 0.5s;
  }
  .kl-tab-pane {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    margin-right: 20px;
    font-size: 14px;
    color: #555;
    font-weight: 600;
    &:nth-last-of-type(1) {
      margin-right: 0px;
    }
  }
}

.tab-active {
  color: #409eff !important;
}
</style>