一个基于Vue3 ts set up 语法糖的tab切换组件，切换效果为左右移动，带有过渡效果

### 创建基于Vue 3和TypeScript Setup语法糖的Tab切换组件 为了构建一个支持左右滑动并带有过渡效果的Tabs组件，在Vue 3中利用`<script setup>`语法糖可以简化开发流程。下面是一个完整的例子，展示了如何实现这一功能。 #### Tabs 组件定义 ```vue <script setup lang="ts"> import { ref, watch } from 'vue'; interface Tab { title: string; content: string; } const props = defineProps<{ tabs: Tab[]; }>(); const activeIndex = ref(0); function setActive(index: number): void { if (index >= 0 && index < props.tabs.length) { activeIndex.value = index; } } </script> <template> <div class="tabs-container"> <!-- Tab Headers --> <ul class="tab-list"> <li v-for="(tab, idx) of tabs" :key="idx" @click="setActive(idx)" :class="{ active: activeIndex === idx }"> {{ tab.title }} </li> </ul> <!-- Transition Effect --> <transition name="slide-fade"> <component :is="'div'" :key="activeIndex" class="tab-content">{{ tabs[activeIndex].content }}</component> </transition> <!-- Navigation Buttons --> <button @click="setActive(activeIndex - 1)">Left</button> <button @click="setActive(activeIndex + 1)">Right</button> </div> </template> <style scoped> .slide-fade-enter-active, .slide-fade-leave-active { transition: all .5s ease-out; } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(20px); opacity: 0; } .tab-list li.active { font-weight: bold; } </style> ``` 此代码片段展示了一个简单的Tabs组件，其中包含了基本的功能：通过点击列表项来激活对应的标签页，并且提供了左右导航按钮用于改变当前显示的内容。当用户点击不同的选项卡或使用方向键时，会触发相应的动画效果[^1]。 对于样式部分，这里仅提供了一种基础样式的实现方式；实际项目中可以根据需求调整CSS以匹配具体的设计风格。