import{e as a,o as n,G as t}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=t(`

Tab \u9009\u9879\u5361

\u5E38\u7528\u4E8E\u5E73\u7EA7\u533A\u57DF\u5927\u5757\u5185\u5BB9\u7684\u7684\u6536\u7EB3\u548C\u5C55\u73B0\uFF0C\u652F\u6301\u5185\u5D4C\u6807\u7B7E\u5F62\u5F0F\u548C\u6E32\u67D3\u5FAA\u73AF\u6570\u636E\u5F62\u5F0F\u3002

\u6CE8\u610F\uFF0C\u7531\u4E8E\u5C0F\u7A0B\u5E8F\u7AEF\u4F9D\u8D56\u7684swiper\u7EC4\u4EF6\u5B58\u5728\u517C\u5BB9\u6027\u95EE\u9898\uFF0C\u56E0\u6B64\u5728\u5C0F\u7A0B\u5E8F\u7AEF\u6682\u65F6\u53EA\u652F\u6301\u57FA\u7840\u7684tab\u5207\u6362\u529F\u80FD\uFF0C\u5F85swiper\u7EC4\u4EF6\u4FEE\u590D\u540E\uFF0C\u5F00\u653E\u6240\u6709\u529F\u80FD\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Tab, TabPanel,Swiper } from '@nutui/nutui';
// taro
import { Tab, TabPanel,Swiper } from '@nutui/nutui-taro';

const app = createApp();
app.use(Tab).use(TabPanel).use(Swiper);

\u57FA\u7840\u6837\u5F0F\uFF0C\u9ED8\u8BA4 tab-title \u5BBD\u5EA6\u5747\u5206\u76F8\u7B49

<nut-tab>
  <nut-tab-panel tab-title="\u5168\u90E8"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u4ED8\u6B3E"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u6536\u83B7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u6536\u83B7\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u5B8C\u6210"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u5B8C\u6210\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>

\u9ED8\u8BA4\u663E\u793A tab\uFF1A

defaultIndex \u8BBE\u7F6E\u9ED8\u8BA4\u663E\u793A tab switchTab \u76D1\u542C\u5207\u6362 tab \u8FD4\u56DE\u4E8B\u4EF6

<nut-tab :defaultIndex="1" @switchTab="switchTab">
  <nut-tab-panel tab-title="\u5168\u90E8"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u4ED8\u6B3E"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u6536\u83B7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u6536\u83B7\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u5B8C\u6210"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u5B8C\u6210\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>
<script lang="ts">
  import { createComponent } from '@/packages/utils/create';
  const { createDemo } = createComponent('tab');
  export default createDemo({
    setup() {
      function switchTab(activeInddex: number, event: MouseEvent) {
        console.log(activeInddex, event);
      }
      return {
        switchTab
      };
    }
  });
</script>

animatedTime \u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B\u65F6\u95F4

<nut-tab :animatedTime="500">
  <nut-tab-panel tab-title="\u5168\u90E8"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u4ED8\u6B3E"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u6536\u83B7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u6536\u83B7\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u5B8C\u6210"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u5B8C\u6210\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>

\u7981\u6B62 tab \u5185\u5BB9\u6ED1\u52A8

<nut-tab :no-swiping="true">
  <nut-tab-panel tab-title="\u5168\u90E8"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u4ED8\u6B3E"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u6536\u83B7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u6536\u83B7\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u5B8C\u6210"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u5B8C\u6210\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>

\u8BBE\u7F6E scrollType=\u201Cscroll\u201D\uFF0C\u6807\u7B7E\u680F\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u6EDA\u52A8

\u5207\u6362\u65F6\u4F1A\u81EA\u52A8\u5C06\u5F53\u524D\u6807\u7B7E\u5C45\u4E2D\u3002

<nut-tab :animatedTime="500" scrollType="scroll">
  <nut-tab-panel tab-title="\u5168\u90E8"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u4ED8\u6B3E"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u6536\u83B7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u6536\u83B7\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u5B8C\u6210"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u5B8C\u6210\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u53D6\u6D88"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u53D6\u6D88\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u8BC4\u4EF7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u8BC4\u4EF7\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>

\u8BBE\u7F6E slot:header \u53EF\u4EE5\u81EA\u5B9A\u4E49\u6807\u7B7E

<nut-tab>
  <nut-tab-panel tab-title="\u5168\u90E8">
    <template v-slot:header><nut-icon name="dongdong"></nut-icon></template>
    <p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9</p>
  </nut-tab-panel>
  <nut-tab-panel tab-title="\u5F85\u4ED8\u6B3E"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u6536\u83B7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u6536\u83B7\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u5B8C\u6210"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u5B8C\u6210\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5DF2\u53D6\u6D88"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5DF2\u53D6\u6D88\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u5F85\u8BC4\u4EF7"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u8BC4\u4EF7\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>

\u5DE6\u53F3 tab \u5E03\u5C40

<nut-tab direction="vertical" :animatedTime="500" :defaultIndex="2">
  <nut-tab-panel tab-title="\u9875\u7B7E\u4E00"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u4E00\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u9875\u7B7E\u4E8C"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u4E8C\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u9875\u7B7E\u4E09"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u4E09\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u9875\u7B7E\u56DB"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u56DB\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u9875\u7B7E\u4E94"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u4E94\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u9875\u7B7E\u516D"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u516D\u5185\u5BB9</p></nut-tab-panel
  >
  <nut-tab-panel tab-title="\u9875\u7B7E\u4E03"
    ><p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E\u4E03\u5185\u5BB9</p></nut-tab-panel
  >
</nut-tab>

\u5F02\u6B65\u64CD\u4F5C

<nut-tab :animatedTime="500" v-if="editList.length>0">
    <nut-tab-panel :tab-title="item.title" v-for="(item,index) in editList" :key="index">
      <p class="content-tab">\u8FD9\u91CC\u662F\u9875\u7B7E{{index}}\u5185\u5BB9</p>
    </nut-tab-panel>
</nut-tab>
<nut-button type="primary" @click="changeList">\u6539\u53D8\u6570\u636E</nut-button>
</div>
<script lang="ts">
import { ref , reactive,toRefs } from "vue";
import { createComponent } from '../../utils/create';
const { createDemo } = createComponent('tab');
export default createDemo({
  setup() {
    const resData = reactive({
      editList:[
        {
          title:'\u6807\u7B7E\u4E00'
        },
        {
          title:'\u6807\u7B7E\u4E8C'
        }
      ]
    });
    function changeList(){
      resData.editList.push({
        title:'\u6807\u7B7E'+resData.editList.length
      })
    }
    return {
      ...toRefs(resData),
      changeList
    };
  }
});
</script>

Prop

nut-tab

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
direction\u9875\u7B7E\u680F\u7684\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C horizontal/verticalStringhorizontal
default-index\u9ED8\u8BA4\u9009\u4E2D\u7684\u9875\u7B7E\u680FNumber0
animated-time\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B\u65F6\u95F4Number0
no-swiping\u7981\u6B62 tab \u5185\u5BB9\u6ED1\u52A8Booleanfalse
scrollType\u9875\u7B7E\u680F\u7684\u5206\u5E03\uFF0C\u9ED8\u8BA4\u5E73\u5747\u5206\u5E03\uFF0C\u8BBE\u7F6E\u4E3A"scroll"\uFF0C\u6709\u6700\u5C0F\u5BBD\u5EA6\uFF0C\u53D1\u751F\u6EDA\u52A8string\u201Cdefault\u201C

nut-tab-panel

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
tab-title\u9875\u7B7E\u7684\u6807\u9898String\u2018\u2019
slot:header\u9875\u7B7E title \u7684\u81EA\u5B9A\u4E49 slotvnode\u2013

Event

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
switch-tab\u5207\u6362\u9875\u7B7E\u65F6\u89E6\u53D1\u4E8B\u4EF6\u70B9\u51FB\u7684\u7D22\u5F15\u503C\u548C\u89E6\u53D1\u5143\u7D20
`,30),c=[p],r={setup(h,{expose:s}){return s({frontmatter:{}}),(j,g)=>(n(),a("div",l,c))}};export{r as default};