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)
支持简单模式,即不指定icon
,label
将垂直居中显示。
默认定位为 absolute
,适用于 100%页面布局
,如果你并非 100% 布局(可以配合使用 view-box 组件),请手动重置样式为 position: fixed
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
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 | 图标下方文字 | -- |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@tabbar-text-active-color | #09BB07 | -- | |
@tabbar-index | 100 | -- |