tab切换，左右加箭头，点击箭头实现tab切换

和正常tab切换一样原理，点击箭头多了步计算

<template>
  <div>
    <div class="tab-container">
      <p>{{projectName}}</p>
      <div class="banner">
        <div v-for="(tab, index) in tabs" :key="index" :class="{'active': activeTab === index,'line':true}">
        </div>
      </div>
      <div class="jt">
        <i class="el-icon-arrow-left" @click="previousTab()"></i>
        <i class="el-icon-arrow-right" @click="nextTab()"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabs: ['学不会1', '学不会2', '学不会3'],
      activeTab: 0, // 索引
      projectName: '' // 名称
    };
  },
  mounted () {
    this.projectName = this.tabs[0]
  },
  methods: {
    // 上一步
    previousTab () {
      this.activeTab = (this.activeTab - 1 + this.tabs.length) % this.tabs.length;
      this.projectName = this.tabs[this.activeTab]
    },
    // 下一步
    nextTab () {
      this.activeTab = (this.activeTab + 1) % this.tabs.length;
      this.projectName = this.tabs[this.activeTab]
    }
  }
};
</script>

<style lang="less" scoped>
.tab-container {
  height: 300px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #999;
  p {
    color: skyblue;
  }
  .banner {
    display: flex;
    .line {
      width: 60px;
      height: 10px;
      background: #ccc;
      margin-left: 10px;
      margin-top: 16px;
    }
  }
  .jt {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%); // 移动元素 x轴，y轴
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
    cursor: pointer;
    font-size: 20px;
  }
}

.active {
  background: skyblue !important;
  color: skyblue;
}
</style>