import{c as t,o as a,C as o}from"./vendor.870c33cc.js";const u={class:"markdown-body"},n=o('

Tabbar 标签栏

介绍

底部导航常用场景

安装

import { createApp } from 'vue';\n//vue\nimport { Tabbar } from '@nutui/nutui';\n//taro\nimport { Tabbar } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Tabbar);\n\n

代码示例

基础用法

<nut-tabbar @tab-switch="tabSwitch">\n  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n

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

自定义选中

<nut-tabbar v-model:visible="active">\n  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n

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

徽标提示

<nut-tabbar>\n  <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n

自定义颜色

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">\n  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n

三个图标的标签栏

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">\n  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n</nut-tabbar>\n

固定底部，可自由跳转

<nut-tabbar :bottom="true">\n  <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n  <nut-tabbar-item\n    tab-title="购物车"\n    href="https://m.jd.com"\n    icon="cart"\n  ></nut-tabbar-item>\n  <nut-tabbar-item\n    tab-title="我的"\n    href="######"\n    icon="my"\n  ></nut-tabbar-item>\n</nut-tabbar>\n

Prop

nut-tabbar

字段	说明	类型	默认值
v-model:visible	选中标签的索引值	number	0
bottom	是否固定在页面底部	Booble	false
unactive-color	icon未激活的颜色	string	#7d7e80
active-color	icon激活的颜色	string	#1989fa

tabbar-item

字段	说明	类型	默认值
tab-title	标签页的标题	String	–
icon	标签页显示的图标名称或图片链接	String	–
href	标签页的跳转链接	String	–
num	页签右上角的数字角标，超出99之后为99+	Number	–

Event

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

',27),e={expose:[],setup:o=>(o,e)=>(a(),t("div",u,[n]))};export default e;