TAB 让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用， 是全局功能的主要展示和切换区域，一个TAB标记一个核心功能，TAB之间可以快速点击切换。
TAB 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
现实开发中，会有很多重复使用的场景。遇到诸如此类就不要有任何怀疑，直接使用小组件！
下面的代码已然精简到最小了，所以在读网友在使用时需要自己添加需要的动能，这里只是起到引导作用。

<template>
    <div style="display: flex;align-items: center;">
        <template v-for="(item, index) in list">
            <div :class="current === index ? '-tab-item active' : '-tab-item'"
                @click="current = index; props.change(index)">{{ item }}
            </div>
        </template>
    </div>
</template>
<script setup>
    import { ref, onMounted, defineProps } from 'vue'
    const list = ref([])
    const current = ref(0)
    const props = defineProps({ data: Object, change: Function })
    onMounted(() => {
        list.value = props.data
    })
</script>
<style>
    .-tab-item {
        cursor: pointer;
        margin: 5px;
        color: darkgray;
        transition: 200ms;
    }

    .-tab-item.active {
        color: black;
    }
</style>