Tab 选项卡

常用于平级区域大块内容的的收纳和展现。

注意，使用该组件需要在引入 nut-tab-panel 组件

import { TabPanel } from "@nutui/nutui";

基本用法

  1. <nut-tab @tab-switch="tabSwitch" line-width="20">
  2.   <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
  3.   <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
  4.   <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
  5. </nut-tab>
  1. export default {
  2.   methods: {
  3.     tabSwitch: function(index, event) {
  4.       console.log(index + '--' + event);
  5.     }
  6.   }
  7. };

使用数据渲染，支持上/下/左/右四个样式；

  1. <nut-tab @tab-switch="tabSwitch" position-nav="bottom">
  2.   <nut-tab-panel
  3.     v-for="value in editableTabs"
  4.     v-bind:key="value.tabTitle"
  5.     :tab-title="value.tabTitle"
  6.     :icon-url="value.tabUrl"
  7.     v-html="value.content"
  8.   >
  9.   </nut-tab-panel>
  10. </nut-tab>
  1. export default {
  2.   data() {
  3.     return {
  4.       positionNavCurr: 'top',
  5.       editableTabs: [
  6.         {
  7.           tabTitle: '衣物',
  8.           tabUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
  9.           content: '<p>衣物内容</p>'
  10.         },
  11.         {
  12.           tabTitle: '日用品',
  13.           tabUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
  14.           content: '<p>日用品内容</p>'
  15.         },
  16.         {
  17.           tabTitle: '器材',
  18.           tabUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
  19.           content: '<p>运动器材内容</p>'
  20.         },
  21.         {
  22.           tabTitle: '电影票',
  23.           tabUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
  24.           content: '<p>电影票内容</p>'
  25.         }
  26.       ]
  27.     };
  28.   },
  29.   methods: {
  30.     tabSwitch: function(index, event) {
  31.       console.log(index + '--' + event);
  32.     }
  33.   }
  34. };

支持滑动选择多个页签

  1. <nut-tab @tab-switch="tabSwitch" :is-scroll="true" :def-index="5">
  2.   <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
  3.   <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
  4.   <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
  5.   <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
  6.   <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
  7.   <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
  8.   <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
  9. </nut-tab>

支持滑动选择多个页签,设置 tab 高度为 250,注意只有在 is-scroll = true 的情况下，设置的 wrapper-height 才有效

  1. <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left" :wrapper-height="250" :def-index="5">
  2.   <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
  3.   <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
  4.   <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
  5.   <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
  6.   <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
  7.   <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
  8.   <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
  9.   <nut-tab-panel tab-title="页签8">页签8</nut-tab-panel>
  10. </nut-tab>

禁止选中，默认选中某个标签,如需更新数组后，重新渲染 Tab 页面，请将更新数组传入 init-data

  1. <nut-tab :def-index="1" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
  2.   <nut-tab-panel
  3.     v-for="value in disableTabs"
  4.     v-bind:key="value.tabTitle"
  5.     :tab-title="value.tabTitle"
  6.     :disable="value.disable"
  7.     v-html="value.content"
  8.   ></nut-tab-panel>
  9. </nut-tab>
  10. <div style="width:100%;height=50px;text-align:center">
  11.   <button @click="resetHandler" type="light">重置Tab页面</button>
  12.   <button @click="clickHandler">更新Tab页面</button>
  13. </div>
  1. import Button from '../button/button.vue';
  2. export default {
  3.   data() {
  4.     return {
  5.       positionNavCurr: 'top',
  6.       disableTabs: [
  7.         {
  8.           tabTitle: '衣物',
  9.           disable: false,
  10.           tabUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
  11.           content: '<p>衣物内容</p>'
  12.         },
  13.         {
  14.           tabTitle: '日用品',
  15.           tabUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
  16.           content: '<p>日用品内容</p>'
  17.         },
  18.         {
  19.           tabTitle: '运动器材',
  20.           tabUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
  21.           content: '<p>运动器材内容</p>'
  22.         },
  23.         {
  24.           tabTitle: '电影票',
  25.           tabUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
  26.           content: '<p>电影票内容</p>'
  27.         }
  28.       ]
  29.     };
  30.   },
  31.   methods: {
  32.     tabSwitch: function(index, event) {
  33.       console.log(index + '--' + event.target);
  34.     },
  35.     clickHandler: function() {
  36.       let newEditableTabs = [
  37.         {
  38.           tabTitle: '衣物2',
  39.           iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
  40.           content: '<p>改变衣物内容</p>'
  41.         },
  42.         {
  43.           tabTitle: '日用品2',
  44.           iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
  45.           content: '<p>改变日用品内容</p>'
  46.         },
  47.         {
  48.           tabTitle: '器材2',
  49.           iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
  50.           content: '<p>改变运动器材内容</p>'
  51.         },
  52.         {
  53.           tabTitle: '电影票2',
  54.           iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
  55.           content: '<p>改变电影票内容</p>'
  56.         }
  57.       ];
  58.       this.disableTabs = newEditableTabs;
  59.     },
  60.     resetHandler: function() {
  61.       let newEditableTabs = [
  62.         {
  63.           tabTitle: '衣物',
  64.           disable: false,
  65.           iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
  66.           content: '<p>衣物内容</p>'
  67.         },
  68.         {
  69.           tabTitle: '日用品',
  70.           iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
  71.           content: '<p>日用品内容</p>'
  72.         },
  73.         {
  74.           tabTitle: '运动器材',
  75.           iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
  76.           content: '<p>运动器材内容</p>'
  77.         },
  78.         {
  79.           tabTitle: '电影票',
  80.           iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
  81.           content: '<p>电影票内容</p>'
  82.         }
  83.       ];
  84.       this.disableTabs = newEditableTabs;
  85.     }
  86.   }
  87. };

支持 slot

  1. <nut-tab :def-index="defIndex" :initData="slotTabs" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :is-show-line="false">
  2.   <nut-tab-panel
  3.     v-for="value in slotTabs"
  4.     v-bind:key="value.tabTitle"
  5.     :tab-title="value.tabTitle"
  6.     :tab-slot="value.slot"
  7.     v-html="value.content"
  8.   ></nut-tab-panel>
  9.   <template v-slot:customSlot="{item}">{{ item.tabSlot }} {{ item.tabTitle }}</template>
  10. </nut-tab>
  1. export default {
  2.   data() {
  3.     return {
  4.       defIndex: 1,
  5.       positionNavCurr:'top',
  6.       slotTabs: [
  7.         {
  8.           tabTitle: '衣物',
  9.           slot: 'customSlot',
  10.           content: '<p>衣物内容</p>'
  11.         },
  12.         {
  13.           tabTitle: '日用品',
  14.           slot: '',
  15.           content: '<p>日用品内容</p>'
  16.         }
  17.       ],
  18.     };
  19.   },
  20.   methods: {
  21.       tabSwitch:function(index,event){
  22.         console.log(index+'--'+event.target);
  23.       },
  24. };

支持徽标 badge

  1. <nut-tab :def-index="defIndex" :initData="badgeTabs" @tab-switch="tabSwitch" :contentShow="true">
  2.   <nut-tab-panel
  3.     v-for="value in badgeTabs"
  4.     v-bind:key="value.tabTitle"
  5.     :tab-title="value.tabTitle"
  6.     :badge="value.badge"
  7.     v-html="value.content"
  8.   ></nut-tab-panel>
  9. </nut-tab>
  1. export default {
  2.   data() {
  3.     return {
  4.       defIndex: 1,
  5.       positionNavCurr:'top',
  6.       badgeTabs: [
  7.         {
  8.           tabTitle: '衣物',
  9.           badge: {
  10.             value: 10
  11.           },
  12.           content: '<p>衣物内容</p>'
  13.         },
  14.         {
  15.           tabTitle: '日用品',
  16.           badge: {
  17.             value: 100,
  18.             max: 99
  19.           },
  20.           content: '<p>日用品内容</p>'
  21.         },
  22.         {
  23.           tabTitle: '运动器材',
  24.           badge: {
  25.             value: 100,
  26.             isDot: true
  27.           },
  28.           content: '<p>运动器材内容</p>'
  29.         },
  30.         {
  31.           tabTitle: '电影票',
  32.           content: '<p>电影票内容</p>'
  33.         }
  34.       ]
  35.     };
  36.   },
  37.   methods: {
  38.       tabSwitch:function(index,event){
  39.         console.log(index+'--'+event.target);
  40.       },
  41. };

Prop

nut-tab

字段说明类型默认值
position-nav页签栏的分布，可选值 top/bottom/left/rightStringtop
def-index默认选中的页签栏String1
init-data监听数据变化，渲染更新页面Array[]
is-show-line是否显示 tab 切换时的红条Booleantrue
is-scroll是否支持滑动选择多个页签Booleanfalse
wrapper-height设置 tab 的高度，只有在 is-scroll=true；positionNav=left 或者 right 的情况下有效Number/String200
line-width页签底部红条自定义宽度默认为 0，则等于页签的宽度

nut-tab-panel

字段说明类型默认值
tab-title页签的标题String‘’
tab-slot页签的插槽名String‘’
badge徽标组件属性Objectfalse
icon-url页签的图标地址String‘’
content页签的自定义内容String‘’
disable是否禁用页签Booleanfalse

Event

事件名称说明回调参数
tab-switch切换页签时触发事件点击的索引值和触发元素

Tab 选项卡 - 图1