简介
vue-tabbar 是一个用于构建底部 TabBar 的 Vue 组件库。该库简洁、易用，同时也支持一些自定义配置。
安装
使用 npm 进行安装：
npm install vue-tabbar
使用方法
引入组件
import Vue from 'vue' import TabBar from 'vue-tabbar' Vue.use(TabBar)
使用组件
<tab-bar :items="items" :active="active" @change="handleChange" />
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------- --
------ -
- ------ ----- ----- ------ --
- ------ ----- ----- -------- --
- ------ ----- ----- ------ -
-
-
--
-------- -
------------------- -
----------- - -----
-
-
-参数说明
items
- 类型：
Array - 必需：是
- 默认值：
[]
TabBar 的配置项列表。
每个配置项包含以下属性：
title（必需）：按钮标题icon（必需）：按钮图标，须遵循 Font Awesome 图标命名规范
active
- 类型：
Number - 必需：是
- 默认值：
0
当前选中的 Tab 按钮下标。
change
- 类型：
Function - 必需：是
Tab 按钮切换时触发的回调函数，参数为切换后的 Tab 按钮下标。
box-cls
- 类型：
String - 必需：否
- 默认值：
''
TabBar 容器的类名。
item-cls
- 类型：
String - 必需：否
- 默认值：
''
TabBar 每个按钮的类名。
active-cls
- 类型：
String - 必需：否
- 默认值：
'active'
选中的 Tab 按钮的类名。
icon-cls
- 类型：
String - 必需：否
- 默认值：
'fas'
按钮图标的类名，须遵循 Font Awesome 图标命名规范。
示例
以下是一个示例代码。可以尝试修改 app.vue 中的 items 属性，观察效果变化。
-- -------------------- ---- -------
----------
---- ---------
-------- -------------- ---------------- ---------------------- --
------
-----------
--------
------ ------- -
------ -
------ -
------- --
------ -
- ------ ----- ----- ------ --
- ------ ----- ----- -------- --
- ------ ----- ----- ------ -
-
-
--
-------- -
------------------- -
----------- - -----
-
-
-
---------结语
vue-tabbar 是一个方便易用的 Vue 底部 TabBar 组件库，可以帮助开发者快速构建底部导航栏。在使用过程中，如果遇到任何问题，欢迎提交 issue。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058ac481e8991b448ed3a8