tabbar

Tabbar

demo 原始链接demo 源码编辑文档组件源码

tabbar - 图1

二维码

tabbar - 图2

Install

安装

局部注册

全局注册

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)

支持简单模式，即不指定icon，label将垂直居中显示。

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

tabbar

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

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

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

tabbar-item

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

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

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

Variables

## 样式变量

Issues