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

Tabbar \u6807\u7B7E\u680F

\u4ECB\u7ECD

\u5E95\u90E8\u5BFC\u822A\u5E38\u7528\u573A\u666F

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Tabbar,TabbarItem } from '@nutui/nutui';
//taro
import { Tabbar,TabbarItem } from '@nutui/nutui-taro';

const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);

\u57FA\u7840\u7528\u6CD5

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

setup() {
  function tabSwitch(item: object, index: number) {
    console.log(item, index);
  }
  return {
    tabSwitch,
  };
},

\u8DEF\u7531\u8DF3\u8F6C

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home" to="/home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category" :to="{ path: '/home', query: { plan: 'private' }}"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49\u56FE\u7247\u94FE\u63A5

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="\u9996\u9875"
          img= 'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg'
           activeImg='http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" 
          img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
          activeImg='http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" 
          img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
          activeImg='http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" 
         img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
         activeImg='http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" 
         img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
         activeImg='http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg'
      ></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49\u9009\u4E2D

<nut-tabbar v-model:visible="active">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

setup() {
  const active = ref(2)
  return {
    active
  };
},

\u5FBD\u6807\u63D0\u793A

<nut-tabbar>
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home" num="11"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart" num="110"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49\u989C\u8272

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u4E09\u4E2A\u56FE\u6807\u7684\u6807\u7B7E\u680F

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
</nut-tabbar>

\u56FA\u5B9A\u5E95\u90E8\uFF0C\u53EF\u81EA\u7531\u8DF3\u8F6C

<nut-tabbar :bottom="true">
  <nut-tabbar-item tab-title="\u9996\u9875" href="" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item
    tab-title="\u8D2D\u7269\u8F66"
    href="https://m.jd.com"
    icon="cart"
  ></nut-tabbar-item>
  <nut-tabbar-item
    tab-title="\u6211\u7684"
    href="######"
    icon="my"
  ></nut-tabbar-item>
</nut-tabbar>

Prop

nut-tabbar

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model:visible	\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15\u503C	number	0
bottom	\u662F\u5426\u56FA\u5B9A\u5728\u9875\u9762\u5E95\u90E8	Booble	false
size	icon\u7684\u5C3A\u5BF8/\u56FE\u7247\u7684\u5BBD\u9AD8	string	\u201820px\u2019
unactive-color	icon\u672A\u6FC0\u6D3B\u7684\u989C\u8272	string	#7d7e80
active-color	icon\u6FC0\u6D3B\u7684\u989C\u8272	string	#1989fa

tabbar-item

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
tab-title	\u6807\u7B7E\u9875\u7684\u6807\u9898	String	\u2013
icon	\u6807\u7B7E\u9875\u663E\u793A\u7684\u56FE\u6807\u540D\u79F0	String	\u2013
img	\u6807\u7B7E\u9875\u663E\u793A\u56FE\u7247\u94FE\u63A5	String	\u2013
activeImg	\u6FC0\u6D3B\u4EE5\u540E\u7684\u6807\u7B7E\u9875\u663E\u793A\u56FE\u7247\u94FE\u63A5\uFF08\u540C\u4E00\u4E2Aitem\u4E2Dicon\u548Cimg\u53EA\u80FD\u9009\u62E9\u4E00\u4E2A\uFF09	String	\u2013
href	\u6807\u7B7E\u9875\u7684\u8DF3\u8F6C\u94FE\u63A5	String	\u2013
to `\u5C0F\u7A0B\u5E8F\u4E0D\u652F\u6301`	\u6807\u7B7E\u9875\u7684\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u4E8E vue-router \u7684 to \u5C5E\u6027 \u5C5E\u6027	String\uFF5CObject	\u2013
num	\u9875\u7B7E\u53F3\u4E0A\u89D2\u7684\u6570\u5B57\u89D2\u6807\uFF0C\u8D85\u51FA99\u4E4B\u540E\u4E3A99+	Number	\u2013

Event

\u4E8B\u4EF6\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
tab-switch	\u5207\u6362\u9875\u7B7E\u65F6\u89E6\u53D1\u4E8B\u4EF6	\u70B9\u51FB\u7684\u6570\u636E\u548C\u7D22\u5F15\u503C

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