vue 中使用 Ant Design 依次提供了三級選項卡

Ant Design 依次提供了三級選項卡，分別用於不同的場景。

• 卡片式的頁簽，提供可關閉的樣式，常用於容器頂部。

• 標准線條式頁簽，用於容器內部的主功能切換，這是最常用的 Tabs。

• RadioButton 可作為更次級的頁簽來使用。

切換的時候綁定點擊事件 onTabClick 和改變事件 onChange

<template>
  <a-tabs  type="card"  @change="onChange" @tabClick="onTabClick">
      <a-tab-pane key="key1" tab="選項卡一">選項卡一內容</a-tab-pane>
      <a-tab-pane key="key2" tab="選項卡二">選項卡二內容</a-tab-pane>
      <a-tab-pane key="key3" tab="選項卡三">選項卡三內容</a-tab-pane>
  </a-tabs>
</template>
<script>
  export default {
      methods: {
          onChange(tabKey) {
              console.log("tab changed : " + tabKey);
          },
          onTabClick(tabKey) {
              console.log("tab clicked : " + tabKey);
          }
      }
  };
</script>

 Ant Design Tabs標簽頁

Tabs標簽頁