使用element-ui中的轮播图来简易实现标签页

<template>
  <div id="app">
    <div class="top">
      <ul>
        <li v-for="item in list" :key="item.id" :class="[flowAct === item.name ? 'active' : '']" @click="change(item.name)">{{item.name}}</li>
      </ul>
    </div>
    <el-carousel
      ref="changeCarousel"
      class="carousel"
      height="500px"
      indicator-position="none"
      arrow="never"
      :autoplay="false"
    >
      <el-carousel-item v-for="item in content" :key="item.id" :name="item.id.toString()">{{item.text}}</el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flowAct: "1",
      list:[
        {id:1,name:'1'},
        {id:2,name:'2'},
        {id:3,name:'3'}
      ],
      content:[
        {id:1,text:'111111111111'},
        {id:2,text:'222222222222'},
        {id:3,text:'333333333333'}
      ]
    };
  },
  methods: {
    change(tab) {
      if (this.flowAct === tab) return;
      this.flowAct = tab;
      this.$refs.changeCarousel.setActiveItem(tab);
    },
  },
};
</script>

<style lang="scss" scoped>
#app {
  margin: 0;
  padding: 0;
}
.top {
  width: 600px;
  height: 50px;
  position: relative;
  left: 50%;
  margin-left: -300px;
  top: 5%;
  ul {
    display: flex;
    align-items: center;
    li {
      width: 200px;
      height: 50px;
      background-color: rgb(190, 190, 190);
      list-style-type: none;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      &:hover {
        background-color: rgb(190, 190, 190, 0.5);
      }
    }
  }
}
.active {
  border-top: cadetblue solid 5px;
  background-color: white !important;
}
.carousel {
  margin-top: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

主要使用了setActiveItem()的方法，在点击切换时有了动画效果，效果如下