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

Tabs \u7EC4\u4EF6

\u4ECB\u7ECD

\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

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Tabs, TabPane } from '@nutui/nutui';
// taro
import { Tabs, TabPane } from '@nutui/nutui-taro';

const app = createApp();
app.use(Tabs);
app.use(TabPane);

\u57FA\u7840\u7528\u6CD5

<nut-tabs v-model="state.tab1value">
  <nut-tabpane title="Tab 1">
    Tab 1
  </nut-tabpane>
  <nut-tabpane title="Tab 2">
    Tab 2
  </nut-tabpane>
  <nut-tabpane title="Tab 3">
    Tab 3
  </nut-tabpane>
</nut-tabs>

import { reactive } from 'vue';
export default {
  props: {},
  setup() {
    const state = reactive({
      tab1value: '0',
      tab11value: '0',
      tab2value: '0',
      tab3value: '0',
      tab4value: '0',
      tab5value: '0',
      tab6value: 'c1',
      list3: Array.from(new Array(2).keys()),
      list4: Array.from(new Array(10).keys()),
      list5: Array.from(new Array(2).keys()),
      list6: [
        {
          title: '\u81EA\u5B9A\u4E49 1',
          paneKey: 'c1',
          icon: 'dongdong'
        },
        {
          title: '\u81EA\u5B9A\u4E49 2',
          paneKey: 'c2',
          icon: 'JD'
        },
        {
          title: '\u81EA\u5B9A\u4E49 3',
          paneKey: 'c3'
        }
      ]
    });
    setTimeout(() => {
      state.list3.push(999);
      state.tab3value = '2';
    }, 3000);

    return { state };
  }
};

\u57FA\u7840\u7528\u6CD5-\u5FAE\u7B11\u66F2\u7EBF

<nut-tabs v-model="state.tab11value" type="smile">
  <nut-tabpane title="Tab 1">
    Tab 1
  </nut-tabpane>
  <nut-tabpane title="Tab 2">
    Tab 2
  </nut-tabpane>
  <nut-tabpane title="Tab 3">
    Tab 3
  </nut-tabpane>
</nut-tabs>

\u901A\u8FC7 pane-key \u5339\u914D

<nut-tabs v-model="state.tab2value">
  <nut-tabpane title="Tab 1" pane-key="0">
    Tab 1
  </nut-tabpane>
  <nut-tabpane title="Tab 2" pane-key="1" :disabled="true">
    Tab 2
  </nut-tabpane>
  <nut-tabpane title="Tab 3" pane-key="2">
    Tab 3
  </nut-tabpane>
</nut-tabs>

\u6570\u636E\u5F02\u6B65\u6E32\u67D3 3s

<nut-tabs v-model="state.tab3value">
  <nut-tabpane v-for="item in state.list3" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tabpane>
</nut-tabs>

\u6570\u91CF\u591A,\u6EDA\u52A8\u64CD\u4F5C

<nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
  <nut-tabpane v-for="item in state.list4" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tabpane>
</nut-tabs>

\u5DE6\u53F3\u5E03\u5C40

<nut-tabs style="height:300px" v-model="state.tab5value" title-scroll direction="vertical">
  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
    Tab {{item}}
  </nut-tabpane>
</nut-tabs>

\u81EA\u5B9A\u4E49\u6807\u7B7E\u680F

<nut-tabs v-model="state.tab6value">
  <template v-slot:titles>
    <div class="nut-tabs__titles-item" @click="state.tab6value=item.paneKey"
      :class="{active:state.tab6value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
      <nut-icon v-if="item.icon" :name="item.icon" />
      <span class="nut-tabs__titles-item__text">{{item.title}}</span>
    </div>
  </template>
  <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
    {{item.title}}
  </nut-tabpane>
</nut-tabs>

API

Tabs Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u7ED1\u5B9A\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26	number,string	0
color	\u6807\u7B7E\u9009\u4E2D\u8272	string	#1a1a1a
background	\u6807\u7B7E\u680F\u80CC\u666F\u989C\u8272	string	#f5f5f5
direction	\u4F7F\u7528\u6A2A\u7EB5\u65B9\u5411 \u53EF\u9009\u503C horizontal\u3001vertical	string	horizontal
type	\u9009\u4E2D\u5E95\u90E8\u5C55\u793A\u6837\u5F0F \u53EF\u9009\u503C line\u3001smile	string	line
title-scroll	\u6807\u7B7E\u680F\u662F\u5426\u53EF\u4EE5\u6EDA\u52A8	boolean	false
ellipsis	\u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57	boolean	true
animated-time	\u5207\u6362\u52A8\u753B\u65F6\u957F,\u5355\u4F4D ms 0\u4EE3\u8868\u65E0\u52A8\u753B	number,string	300
title-gutter	\u6807\u7B7E\u95F4\u9699	number,string	0

Tabs Slots

\u540D\u79F0	\u8BF4\u660E
titles	\u81EA\u5B9A\u4E49\u5BFC\u822A\u533A\u57DF
default	\u81EA\u5B9A\u4E49\u5185\u5BB9

Tabpane Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u6807\u9898	string
pane-key	\u6807\u7B7E Key , \u5339\u914D\u7684\u6807\u8BC6\u7B26	string	\u9ED8\u8BA4\u7D22\u5F150,1,2\u2026
disabled	\u662F\u5426\u7981\u7528\u6807\u7B7E	boolean	false

Tabpane Slots

\u540D\u79F0	\u8BF4\u660E
default	\u81EA\u5B9A\u4E49\u5185\u5BB9

Tabs Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1	{title,paneKey,disabled}
change	\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1	{title,paneKey,disabled}

`,31),e=[p],o={setup(h,{expose:s}){return s({frontmatter:{}}),(r,j)=>(t(),a("div",l,e))}};export{o as default};