使用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()的方法，在点击切换时有了动画效果，效果如下