vue 中使用 Ant Design 依次提供了三级选项卡

Posted 2020-12-10 dafei4

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标签页