Tabs 标签页

选项卡切换组件。

何时使用

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

Ant Design 依次提供了三级选项卡，分别用于不同的场景。

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。
  • 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
  • RadioButton 可作为更次级的页签来使用。

代码演示

基本

默认选中第一项。

  1. <template>
  2.     <v-tabs active-tab-key="key1" @change="onChange" @tab-click="onTabClick">
  3.         <v-tab-pane tab-key="key1" tab="选项卡一">选项卡一内容</v-tab-pane>
  4.         <v-tab-pane tab-key="key2" tab="选项卡二">选项卡二内容</v-tab-pane>
  5.         <v-tab-pane tab-key="key3" tab="选项卡三">选项卡三内容</v-tab-pane>
  6.     </v-tabs>
  7. </template>
  9. <script>
  10.     export default {
  11.         methods: {
  12.             onChange(tabKey) {
  13.                 console.log("tab changed : " + tabKey);
  14.             },
  15.             onTabClick(tabKey) {
  16.                 console.log("tab clicked : " + tabKey);
  17.             }
  18.         }
  19.     };
  20. </script>

禁用

禁用某一项。

  1. <template>
  2.     <v-tabs active-tab-key="1">
  3.         <v-tab-pane tab-key="1" tab="选项卡一">选项卡一内容</v-tab-pane>
  4.         <v-tab-pane tab-key="2" tab="选项卡二" disabled>选项卡二内容</v-tab-pane>
  5.         <v-tab-pane tab-key="3" tab="选项卡三">选项卡三内容</v-tab-pane>
  6.         <v-tab-pane tab-key="4" tab="选项卡四" disabled>选项卡四内容</v-tab-pane>
  7.     </v-tabs>
  8. </template>

图标

有图标的标签。

  1. <template>
  2.     <v-tabs active-tab-key="1">
  3.         <v-tab-pane tab-key="1" icon="apple" tab="选项卡一">选项卡一内容</v-tab-pane>
  4.         <v-tab-pane tab-key="2" icon="android" tab="选项卡二">选项卡二内容</v-tab-pane>
  5.     </v-tabs>
  6. </template>

滑动

可以左右滑动，容纳更多标签。

  1. <template>
  2.     <v-tabs active-tab-key="1">
  3.         <v-tab-pane tab-key="1" tab="选项一">选项卡一内容</v-tab-pane>
  4.         <v-tab-pane tab-key="2" tab="选项二">选项卡二内容</v-tab-pane>
  5.         <v-tab-pane tab-key="3" tab="选项三">选项卡三内容</v-tab-pane>
  6.         <v-tab-pane tab-key="4" tab="选项四">选项卡四内容</v-tab-pane>
  7.         <v-tab-pane tab-key="5" tab="选项五">选项卡五内容</v-tab-pane>
  8.         <v-tab-pane tab-key="6" tab="选项六">选项卡六内容</v-tab-pane>
  9.         <v-tab-pane tab-key="7" tab="选项七">选项卡七内容</v-tab-pane>
  10.         <v-tab-pane tab-key="8" tab="选项八">选项卡八内容</v-tab-pane>
  11.         <v-tab-pane tab-key="9" tab="选项九">选项卡九内容</v-tab-pane>
  12.         <v-tab-pane tab-key="10" tab="选项十">选项卡十内容</v-tab-pane>
  13.     </v-tabs>
  14. </template>

附加内容

可以在页签右边添加附加操作。

  1. <template>
  2.     <v-tabs active-tab-key="1">
  3.         <v-button slot="extra" style="margin-right: 5px;">额外的操作</v-button>
  4.         <v-tab-pane tab-key="1" tab="选项卡一">选项卡一内容</v-tab-pane>
  5.         <v-tab-pane tab-key="2" tab="选项卡二">选项卡二内容</v-tab-pane>
  6.         <v-tab-pane tab-key="3" tab="选项卡三">选项卡三内容</v-tab-pane>
  7.     </v-tabs>
  8. </template>

迷你型

用在弹出框等较狭窄的容器内。

  1. <template>
  2.     <v-tabs active-tab-key="1" size="small">
  3.         <v-tab-pane tab-key="1" tab="选项一">选项卡一内容</v-tab-pane>
  4.         <v-tab-pane tab-key="2" tab="选项二">选项卡二内容</v-tab-pane>
  5.         <v-tab-pane tab-key="3" tab="选项三">选项卡三内容</v-tab-pane>
  6.         <v-tab-pane tab-key="4" tab="选项四">选项卡四内容</v-tab-pane>
  7.         <v-tab-pane tab-key="5" tab="选项五">选项卡五内容</v-tab-pane>
  8.         <v-tab-pane tab-key="6" tab="选项六">选项卡六内容</v-tab-pane>
  9.         <v-tab-pane tab-key="7" tab="选项七">选项卡七内容</v-tab-pane>
  10.         <v-tab-pane tab-key="8" tab="选项八">选项卡八内容</v-tab-pane>
  11.         <v-tab-pane tab-key="9" tab="选项九">选项卡九内容</v-tab-pane>
  12.         <v-tab-pane tab-key="10" tab="选项十">选项卡十内容</v-tab-pane>
  13.     </v-tabs>
  14. </template>

位置

有四个位置，position="left|right|top|bottom"。

  1. <template>
  2.     <div style="margin-bottom: 16px;">
  3.         Tab的位置：<v-select :data="positionOptions" v-model="position" size="lg" style="width: 200px;"></v-select>    
  4.     </div>
  5.     <v-tabs active-tab-key="1" :position="position">
  6.         <v-tab-pane tab-key="1" tab="选项卡一">选项卡一内容</v-tab-pane>
  7.         <v-tab-pane tab-key="2" tab="选项卡二">选项卡二内容</v-tab-pane>
  8.         <v-tab-pane tab-key="3" tab="选项卡三">选项卡三内容</v-tab-pane>
  9.     </v-tabs>
  10. </template>
  12. <script>
  13.     export default {
  14.         data() {
  15.             return {
  16.                 position: 'top',
  17.                 positionOptions: [
  18.                     {label: 'top', value: 'top'},
  19.                     {label: 'bottom', value: 'bottom'},
  20.                     {label: 'left', value: 'left'},
  21.                     {label: 'right', value: 'right'}
  22.                 ]
  23.             }
  24.         }
  25.     }
  26. </script>

卡片式页签

另一种样式的页签，不提供对应的垂直样式。

  1. <template>
  2.     <v-tabs active-tab-key="1" type="card">
  3.         <v-tab-pane tab-key="1" tab="选项卡一">选项卡一内容</v-tab-pane>
  4.         <v-tab-pane tab-key="2" tab="选项卡二">选项卡二内容</v-tab-pane>
  5.         <v-tab-pane tab-key="3" tab="选项卡三">选项卡三内容</v-tab-pane>
  6.     </v-tabs>
  7. </template>

卡片式页签容器

用于容器顶部，需要一点额外的样式覆盖。

  1. <template>
  2.     <div id="components-tabs-demo-card-top">
  3.         <div class="card-container">
  4.             <v-tabs active-tab-key="1" type="card">
  5.                 <v-tab-pane tab-key="1" tab="选项卡一">选项卡一内容</v-tab-pane>
  6.                 <v-tab-pane tab-key="2" tab="选项卡二">选项卡二内容</v-tab-pane>
  7.                 <v-tab-pane tab-key="3" tab="选项卡三">选项卡三内容</v-tab-pane>
  8.             </v-tabs>
  9.         </div>
  10.     </div>
  11. </template>
  13. <style>
  14.     #components-tabs-demo-card-top {
  15.         background: #ECECEC;
  16.         overflow: hidden;
  17.         padding: 24px;
  18.     }
  20.     #components-tabs-demo-card-top > .card-container > .ant-tabs-card > .ant-tabs-content {
  21.         height: 120px;
  22.         margin-top: -16px;
  23.     }
  25.     #components-tabs-demo-card-top > .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  26.         background: #fff;
  27.         padding: 16px;
  28.     }
  30.     #components-tabs-demo-card-top > .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  31.         border-color: transparent;
  32.     }
  34.     #components-tabs-demo-card-top > .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  35.         border-color: #fff;
  36.     }
  37. </style>

新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。

  1. <template>
  2.     <v-tabs active-tab-key="tab1" type="editable-card" @add="onAdd" @remove="onRemove">
  3.         <v-tab-pane v-for="tabPane in tabPanes" :tab-key="tabPane.key" :key="tabPane.key" :tab="tabPane.tab">{{ tabPane.content }}</v-tab-pane>
  4.     </v-tabs>
  5. </template>
  7. <script>
  8.     export default {
  9.         data() {
  10.             return {
  11.                 keyIndex: 1,
  12.                 tabPanes: [
  13.                     {key: 'tab1', tab: '选项卡1', content: '选项卡1的内容'},
  14.                     {key: 'tab2', tab: '选项卡2', content: '选项卡2的内容'},
  15.                     {key: 'tab3', tab: '选项卡3', content: '选项卡3的内容'}
  16.                 ]
  17.             }
  18.         },
  19.         methods: {
  20.             onAdd() {
  21.                 this.tabPanes.push({
  22.                     key: 'newTab' + this.keyIndex,
  23.                     tab: '新选项卡' + this.keyIndex,
  24.                     content: '新选项卡' + this.keyIndex++ + '内容'
  25.                 });
  26.             },
  27.             onRemove(tabKey) {
  28.                 for (let i = 0; i < this.tabPanes.length; i++) {
  29.                     if (this.tabPanes[i].key == tabKey) {
  30.                         this.tabPanes.splice(i, 1);
  31.                         break;
  32.                     }
  33.                 }
  34.             }
  35.         }
  36.     }
  37. </script>

新增和关闭自定义新增页签触发器页签

隐藏默认的页签增加图标，给自定义触发器绑定事件。

  1. <template>
  2.     <div style="margin-bottom: 16px;">
  3.         Tab的位置：<v-select :data="positionOptions" v-model="customPosition" size="lg" style="width: 200px;"></v-select>
  4.         <v-button @click="onCustomAdd">新增</v-button>
  5.     </div>
  6.     <v-tabs :active-tab-key="customActiveKey" type="editable-card" :position="customPosition" hide-add @remove="onCustomRemove" >
  7.         <v-tab-pane v-for="tabPane in customTabPanes" :tab-key="tabPane.key" :key="tabPane.key" :tab="tabPane.tab">{{ tabPane.content }}</v-tab-pane>
  8.     </v-tabs>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 customPosition: 'top',
  16.                 customActiveKey: 'tab1',
  17.                 customKeyIndex: 1,
  18.                 positionOptions: [
  19.                     {label: 'top', value: 'top'},
  20.                     {label: 'bottom', value: 'bottom'},
  21.                     {label: 'left', value: 'left'},
  22.                     {label: 'right', value: 'right'}
  23.                 ],
  24.                 customTabPanes: [
  25.                     {key: 'tab1', tab: '选项卡1', content: '选项卡1的内容'},
  26.                     {key: 'tab2', tab: '选项卡2', content: '选项卡2的内容'},
  27.                     {key: 'tab3', tab: '选项卡3', content: '选项卡3的内容'}
  28.                 ]
  29.             }
  30.         },
  31.         methods: {
  32.             onCustomAdd() {
  33.                 this.customTabPanes.push({
  34.                     key: 'newTab' + this.customKeyIndex,
  35.                     tab: '新选项卡' + this.customKeyIndex,
  36.                     content: '新选项卡' + this.customKeyIndex++ + '内容'
  37.                 });
  38.             },
  39.             onCustomRemove(tabKey) {
  40.                 this.customActiveKey = 'newTab' + this.customKeyIndex;
  41.                 for (let i = 0; i < this.customTabPanes.length; i++) {
  42.                     if (this.customTabPanes[i].key == tabKey) {
  43.                         this.customTabPanes.splice(i, 1);
  44.                         break;
  45.                     }
  46.                 }
  47.             }
  48.         }
  49.     }
  50. </script>

API

Tabs Props

参数说明类型默认值
activeTabKey当前激活 tab 面板的 tabKeystring-
slot : extratab bar 上额外的元素slot node-
type页签的基本样式，可选 line、card editable-card 类型stringline
size大小，提供 default 和 small 两种大小，仅当 type="line" 时生效。stringdefault
position页签位置，可选值有 top right bottom leftstringtop
hideAdd是否隐藏加号图标，在 type="editable-card" 时有效booleanfalse

TabPane Props

参数说明类型默认值
tabKey对应 activeTabKeystring-
tab选项卡头显示文字string-
icon图标 Icon 类型string-
disabled是否禁用当前tabbooleanfalse

Tabs Events

事件名称说明回调参数
change切换面板时触发的事件—
tab-clicktab 被点击时触发的事件—
add新增页签的回调，在 type="editable-card"且hideAdd=false 时有效-
remove新增页签的回调，在 type="editable-card" 时有效tabKey