naive ui tabs切换

Naive UI 是一款基于 Vue 3 和 TypeScript 开发的 UI 组件库，它提供了丰富的组件，包括 Tabs 组件。下面是一个使用 Naive UI Tabs 组件实现切换效果的示例：

<template>
  <div>
    <n-tabs v-model:selected-tab="selectedTab">
      <n-tab-pane name="tab1">Tab 1 Content</n-tab-pane>
      <n-tab-pane name="tab2">Tab 2 Content</n-tab-pane>
      <n-tab-pane name="tab3">Tab 3 Content</n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { NTabs, NTabPane } from "naive-ui";

export default defineComponent({
  components: {
    NTabs,
    NTabPane,
  },
  setup() {
    const selectedTab = ref("tab1");
    return {
      selectedTab,
    };
  },
});
</script>

在这个示例中，我们通过 `v-model:selected-tab` 绑定了组件的 `selectedTab` 属性，来控制选中的 Tab。在 `n-tabs` 中，我们定义了三个 `n-tab-pane`，分别对应三个 Tab 的内容，在 `name` 属性中指定了每个 Tab 的名称。在 `selectedTab` 中指定默认选中的 Tab，这里我们指定了第一个 Tab。

这样，我们就可以通过点击 Tabs 来切换不同的 Tab 内容了。