一个vue底部导航栏组件的实现

写一个底部导航栏独立组件，便于以后项目中的使用
源码地址：https://github.com/michaelxuzhi/tabbar
分为创建和封装两步
需求：独立、图标可改、名称可改、flex布局
①分析：首先是TabBar

TabBar是导航栏的主框架，包裹整个导航栏
创建tabbar -> Tabbar.vue

// 这里啥都没有

再在App.vue中引用MainTabBar组件

到这里为止，是创建了一个底部导航栏区域，但是里面没有内容，所以Tabbar.vue的高度是0的，也就看不到任何效果，只要给Tabbar.vue的样式加上一点高度，就可以知道现在导航栏区域的样子了，后续会去除这个写死的高度，由TabBarItem的内容来撑开导航栏
height: 50px;

②接着创建TabBarItem，也就是每一个选项
这些选项都是要插进Tabbar.vue中的，所以Tabbar.vue要设置插槽，让每个Item能添加进去

tabbar -> TabbarItem.vue

导航栏中已经设置 display:flex;这里item就设置flex:1; item的高度给到49px，这是通常导航栏的高度，有高度就可以撑开导航栏了，还要设置item中图标的样式

<div class=“tab-bar-item” @click=“itemClick”>

item中用来插入图标和文字
item的图标设置

item的文字设置

给图片和文字使用具名slot是因为TabBarItem也是一个抽离出来的单独组件，最终TabBar.vue和TabBarItem.vue都会集中在MainTabBar中引用并呈现。

首页

分类

层级关系是：
img、text -> tab-bar-item ≈ tab-bar -> main-tab-bar -> App
在MainTabBar.vue中引用并使用了这两个组件，并给子层传递了参数，所以在子层中要用props来接收一下：
这是TabBarItem的逻辑处理

该组件的最终实现需要：导航栏中对应的每一项图标和对应的展示页面
图标的路径在MainTabBar.vue中自行修改，对应的展示页面的话，需要安装vue-router并进行配置
这里结合懒加载简单配置“首页”和“分类”两个对应页面
import Vue from ‘vue’
import VueRouter from ‘vue-router’

Vue.use(VueRouter)

// 引用两个要显示的页面的组件对应文件，使用的是懒加载
const Home = () => import(’…/views/home/Home’);
const Category = () => import("…/views/category/Category");

// 配置路由信息
const routes = [
{
path: ‘’,
redirect : ‘/home’
},
{
path: ‘/home’,
component : Home
},
{
path: ‘/category’,
component : Category
}
]

// 使用的时’history’模式，
const router = new VueRouter({
mode : ‘history’,
routes
})

export default router

最终实现

本人懒得写了，这是转载别人博主，这篇文章挺好的，原创地址为https://blog.csdn.net/michaelxuzhi___/article/details/105892928?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-15.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-15.control