Element plus tabs + carousel 快速实

网上各种例子，试了都不靠谱，自己用tabs + 跑马灯实现一个，简单直接，不用css，也不写动画，效果刚刚好，不多说，上源码

<template>
    <div style="width: 80%; margin-left: auto; margin-right: auto;">
        <div style="margin-top: 40px">
          <el-tabs v-model="activeTab" @tab-click="tabClick">
            <el-tab-pane label="1111" name="111"> </el-tab-pane>
            <el-tab-pane label="2222" name="222"> </el-tab-pane>
            <el-tab-pane label="3333" name="333"> </el-tab-pane>
          </el-tabs>
          <el-carousel
            trigger="click"
             height="400px"
            indicator-position="none"
            arrow="never"
            ref="tabRef"
            :autoplay="false"
          >
            <el-carousel-item name="111">
            111
            </el-carousel-item>
            <el-carousel-item name="222"> 
              222
            </el-carousel-item>
            <el-carousel-item name="333"> 
              333
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
</template>
<script setup lang="ts"> 
import {ref ,onMounted ,nextTick} from 'vue';
const activeTab = ref('111');
const tabRef = ref();
const tabClick = (tab,event) =>{
    activeTab.value = tab.props.name;
    tabRef.value.setActiveItem(tab.props.name);
}

onMounted(() => {
  nextTick(() => {
    tabRef.value.setActiveItem(activeTab.value);
  });
});
</script>
<style  scoped>

</style>

简单的效果图