antd vue Tabs控件的使用

Ant Design Vue 是一个非常流行的 Vue 组件库，它提供了一个 Tabs 控件，用于创建标签页。以下是一个简单的使用示例：

<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
    <a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>
</template>
 
<script>
import { Tabs, TabPane } from 'ant-design-vue';
 
export default {
  components: { 'a-tabs': Tabs, 'a-tab-pane': TabPane },
  data() {
    return {
      activeKey: '1', // 当前激活的 Tab 的 key
    };
  },
};
</script>

在这个例子中，我们创建了一个 Tabs 控件，其中包含三个 TabPane，每个 TabPane 都有一个唯一的 key 属性。v-model:activeKey 用于双向绑定当前激活的 Tab 的 key。当用户点击不同的标签时，activeKey 会更新，从而显示相应的内容。