Tab 选项卡请使用手机扫码体验

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

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

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

基本用法

  1. html
    <nut-tab @tab-switch="tabSwitch">
  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. javascript
    export default {
  2.   methods: {
  3.       tabSwitch:function(index,event){
  4.         console.log(index+'--'+event);
  5.       }
  6.   }
  7. };

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

  1. html
    <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. javascript
    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. html
      <nut-tab @tab-switch="tabSwitch" :is-scroll="true">
  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>
  1. html
      <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left">
  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页面，请将更新数组传入init-data

  1. html
    <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. javascript
    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:
  40.               "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
  41.             content: "<p>改变衣物内容</p>"
  42.           },
  43.           {
  44.             tabTitle: "日用品2",
  45.             iconUrl:
  46.               "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
  47.             content: "<p>改变日用品内容</p>"
  48.           },
  49.           {
  50.             tabTitle: "器材2",
  51.             iconUrl:
  52.               "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
  53.             content: "<p>改变运动器材内容</p>"
  54.           },
  55.           {
  56.             tabTitle: "电影票2",
  57.             iconUrl:
  58.               "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
  59.             content: "<p>改变电影票内容</p>"
  60.           }
  61.         ]
  62.         this.disableTabs = newEditableTabs;
  63.       },
  64.       resetHandler:function(){
  65.           let newEditableTabs = [
  66.           {
  67.             tabTitle: "衣物",
  68.             disable: false,
  69.             iconUrl:
  70.               "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
  71.             content: "<p>衣物内容</p>"
  72.           },
  73.           {
  74.             tabTitle: "日用品",
  75.             iconUrl:
  76.               "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
  77.             content: "<p>日用品内容</p>"
  78.           },
  79.           {
  80.             tabTitle: "运动器材",
  81.             iconUrl:
  82.               "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
  83.             content: "<p>运动器材内容</p>"
  84.           },
  85.           {
  86.             tabTitle: "电影票",
  87.             iconUrl:
  88.               "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
  89.             content: "<p>电影票内容</p>"
  90.           }
  91.         ]
  92.         this.disableTabs = newEditableTabs;
  93.       }
  94.   }
  95. };

Prop

nut-tab

字段说明类型默认值
position-nav页签栏的分布，可选值 top/bottom/left/rightStringtop
def-index默认选中的页签栏String1
init-data监听数据变化，渲染更新页面Array[]
is-show-line是否显示tab切换时的红条Booleantrue
is-scroll是否支持滑动选择多个页签Booleanfalse

nut-tab-panel

字段说明类型默认值
tab-title页签的标题String‘’
icon-url页签的图标地址String‘’
content页签的自定义内容String‘’
disable是否禁用页签Booleanfalse

Event

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

Tab 选项卡 - 图1