Tabbar
Install

安装

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

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


tabbar

tabbar

属性

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

事件

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

插槽

名字说明版本要求
默认插槽tabbar主体内容,只允许tabbar-item--
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图标下方文字--
Variables

样式变量

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


贡献者

贡献者

该组件(包含文档)迭代次数 24,贡献人数 1

airyland

Changelog

发布日志

  • v2.7.7 [fix] 修复 tabbar-item 服务端渲染不一致问题
  • v2.7.4 [enhance] 开发模式下对于非 100% 布局使用显示 absolute 定位说明
  • v2.5.5 [feature] 支持 link 上使用 replace: true 写法 #1761
  • v2.5.4 [feature] 增加事件 on-index-change #1715
  • v2.1.1-rc.8 [feature] 支持点击时切换图标
  • v2.1.1-rc.4 [fix] 修复 this.$slots 不存在 #1000 @asingingfish
  • v2.1.1-rc.1 [fix] 修复 less 变量 @tabbar-text-active-color #982 @marsal1212