import{e as s,o as a,G as n}from"./vendor.f7062dc0.js";const t={class:"markdown-body"},l=[n('

Tab 选项卡

常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式。

注意，由于小程序端依赖的swiper组件存在兼容性问题，因此在小程序端暂时只支持基础的tab切换功能，待swiper组件修复后，开放所有功能。

安装

import { createApp } from 'vue';\n// vue\nimport { Tab, TabPanel,Swiper } from '@nutui/nutui';\n// taro\nimport { Tab, TabPanel,Swiper } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Tab).use(TabPanel).use(Swiper);\n\n

基础样式，默认 tab-title 宽度均分相等

<nut-tab>\n  <nut-tab-panel tab-title="全部"\n    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待付款"\n    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待收获"\n    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已完成"\n    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel\n  >\n</nut-tab>\n

默认显示 tab：

defaultIndex 设置默认显示 tab switchTab 监听切换 tab 返回事件

<nut-tab :defaultIndex="1" @switchTab="switchTab">\n  <nut-tab-panel tab-title="全部"\n    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待付款"\n    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待收获"\n    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已完成"\n    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel\n  >\n</nut-tab>\n<script lang="ts">\n  import { createComponent } from '@/packages/utils/create';\n  const { createDemo } = createComponent('tab');\n  export default createDemo({\n    setup() {\n      function switchTab(activeInddex: number, event: MouseEvent) {\n        console.log(activeInddex, event);\n      }\n      return {\n        switchTab\n      };\n    }\n  });\n</script>\n

animatedTime 开启切换标签内容时的转场动画时间

<nut-tab :animatedTime="500">\n  <nut-tab-panel tab-title="全部"\n    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待付款"\n    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待收获"\n    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已完成"\n    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel\n  >\n</nut-tab>\n

禁止 tab 内容滑动

<nut-tab :no-swiping="true">\n  <nut-tab-panel tab-title="全部"\n    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待付款"\n    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待收获"\n    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已完成"\n    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel\n  >\n</nut-tab>\n

设置 scrollType=“scroll”，标签栏可以在水平方向上滚动

切换时会自动将当前标签居中。

<nut-tab :animatedTime="500" scrollType="scroll">\n  <nut-tab-panel tab-title="全部"\n    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待付款"\n    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待收获"\n    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已完成"\n    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已取消"\n    ><p class="content-tab">这里是页签已取消内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待评价"\n    ><p class="content-tab">这里是页签待评价内容</p></nut-tab-panel\n  >\n</nut-tab>\n

设置 slot:header 可以自定义标签

<nut-tab>\n  <nut-tab-panel tab-title="全部">\n    <template v-slot:header><nut-icon name="dongdong"></nut-icon></template>\n    <p class="content-tab">这里是页签全部内容</p>\n  </nut-tab-panel>\n  <nut-tab-panel tab-title="待付款"\n    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待收获"\n    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已完成"\n    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="已取消"\n    ><p class="content-tab">这里是页签已取消内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="待评价"\n    ><p class="content-tab">这里是页签待评价内容</p></nut-tab-panel\n  >\n</nut-tab>\n

左右 tab 布局

<nut-tab direction="vertical" :animatedTime="500" :defaultIndex="2">\n  <nut-tab-panel tab-title="页签一"\n    ><p class="content-tab">这里是页签一内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="页签二"\n    ><p class="content-tab">这里是页签二内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="页签三"\n    ><p class="content-tab">这里是页签三内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="页签四"\n    ><p class="content-tab">这里是页签四内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="页签五"\n    ><p class="content-tab">这里是页签五内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="页签六"\n    ><p class="content-tab">这里是页签六内容</p></nut-tab-panel\n  >\n  <nut-tab-panel tab-title="页签七"\n    ><p class="content-tab">这里是页签七内容</p></nut-tab-panel\n  >\n</nut-tab>\n

异步操作

<nut-tab :animatedTime="500" v-if="editList.length>0">\n    <nut-tab-panel :tab-title="item.title" v-for="(item,index) in editList" :key="index">\n      <p class="content-tab">这里是页签{{index}}内容</p>\n    </nut-tab-panel>\n</nut-tab>\n<nut-button type="primary" @click="changeList">改变数据</nut-button>\n</div>\n<script lang="ts">\nimport { ref , reactive,toRefs } from "vue";\nimport { createComponent } from '../../utils/create';\nconst { createDemo } = createComponent('tab');\nexport default createDemo({\n  setup() {\n    const resData = reactive({\n      editList:[\n        {\n          title:'标签一'\n        },\n        {\n          title:'标签二'\n        }\n      ]\n    });\n    function changeList(){\n      resData.editList.push({\n        title:'标签'+resData.editList.length\n      })\n    }\n    return {\n      ...toRefs(resData),\n      changeList\n    };\n  }\n});\n</script>\n

Prop

nut-tab

字段说明类型默认值
direction页签栏的位置，可选值 horizontal/verticalStringhorizontal
default-index默认选中的页签栏Number0
animated-time开启切换标签内容时的转场动画时间Number0
no-swiping禁止 tab 内容滑动Booleanfalse
scrollType页签栏的分布，默认平均分布，设置为"scroll"，有最小宽度，发生滚动string“default“

nut-tab-panel

字段说明类型默认值
tab-title页签的标题String‘’
slot:header页签 title 的自定义 slotvnode–

Event

事件名称说明回调参数
switch-tab切换页签时触发事件点击的索引值和触发元素
',30)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};