vue 搜索框header_Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航

最近一直在倒腾Nuxt项目，由于Nuxt.js是基于Vue.js的服务端渲染框架，只要是会vue，基本能很快上手了。

一般移动端项目，顶部导航/底部Tab功能是少不了的。本想着使用Vant组件库，可是项目中有个类似咸鱼底部凸起导航功能，经过再三考虑还是自己造了个自定义Navbar+Tabbar组件。以便以后在其它Vue项目中也能使用。

如上图：在Nuxt项目中应用效果

下面就开始进入Nuxt中创建自定义顶部导航条及底部标签栏的介绍。

◆ 开始

在components目录下新建 headerBar.vue 和 tabBar.vue 页面。

然后在 plugins 目录下的 componentsInstall.js 文件中引入即可。

◆用能境战求道，重件开又是正易里是了些之框 自定义导航条headerBa求圈分件圈浏第用代是水刚道。的它还r