当前位置: 首页 > 文档资料 > VUX 中文文档 >

Tabbar 组件使用教程

优质
小牛编辑
130浏览
2023-12-01

安装

import { Tabbar, TabbarItem } from 'vux'

export default {
  components: {
    Tabbar,
    TabbarItem
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vux'

Vue.component('tabbar', Tabbar)
Vue.component('tabbar-item', TabbarItem)

支持简单模式,即不指定iconlabel将垂直居中显示。

默认定位为 absolute,适用于 100%页面布局,如果你并非 100% 布局(可以配合使用 view-box 组件),请手动重置样式为 position: fixed

属性

名字类型默认值说明版本要求
icon-classstring图标的class名--

事件

名字参数说明版本要求
@on-index-change--value 值变化时触发v2.5.4

插槽

名字说明版本要求
默认插槽tabbar主体内容,只允许tabbar-item--

tabbar-item

属性

名字类型默认值说明版本要求
selectedbooleanfalse是否选中当前项,你也可以使用v-model来指定选中的tabbar-itemindex--
badgestring徽标文字,不指定则不显示--
show-dotbooleanfalse是否显示红点--
linkstring链接,可以为普通url或者用vue-link的路径写法,使用 object 写法指定 replace 为 true 可实现 replace 跳转--
icon-classstring图标类名,如果tabbar也同时定义了icon-class, 会使用tabbar-item的--

事件

名字参数说明版本要求
@on-item-click--点击菜单项时触发--

插槽

名字说明版本要求
icon图标区域--
icon-active如果存在,当前 tabbar-item 点击时会显示,用于切换图标v2.1.1-rc.8
label图标下方文字--

样式变量

名字默认值说明继承自变量
@tabbar-text-active-color #09BB07--
@tabbar-index 100--