底部栏 tabbar new 待优化

底部路由导航栏

使用说明

简单引入

通过tabbar组件与tabbar-item组件配合使用构造底部路由栏

tabar组件中的tabbar-item组件将依次赋予0~n-1的下标，点击对应item时会触发tabbar组件pick事件，返回一个参数index，为当前选中的tabbar-item下标

为tabbar-item组件绑定to属性定义路由，若处在当前路由也会自动匹配选中

首页

其他

底部栏

展开代码

<template>
  <vi-tabbar>
    <vi-tabbar-item to="/">
      <template v-slot:default>首页</template>
    </vi-tabbar-item>
    <vi-tabbar-item>
      <template v-slot:icon>
        <vi-icon/>
      </template>
      <template v-slot:default>其他</template>
    </vi-tabbar-item>
    <vi-tabbar-item to="/components/tabbar/">
      <template v-slot:default>底部栏</template>
    </vi-tabbar-item>
  </vi-tabbar>
</template>

Props

tabbar-item

属性名	描述	类型	默认值

插槽

tabbar

插槽名	描述	有无默认内容

tabbar-item

插槽名	描述	有无默认内容

事件支持

tabbar

事件名	描述	参数列表

可覆写css变量

变量名	描述	默认值