最近趁著空閑時間，一直在倒騰Nuxt項目開發(fā)，由于項目中需要用到導航欄/Tabbar，于是就自己定制了個自定義導航Navbar+Tabbar組件。

如下圖：在nuxt項目中的效果展示。

下面就一步步講解下具體實現(xiàn)過程。

首先，需要在components目錄下新建?headerBar.vue?和?tabBar.vue?頁面。

接著，在 plugins 目錄下新建?componentsInstall.js 文件并引入即可。

自定義Navbar組件

自定義Tabbar.vue組件

如果想要類似咸魚底部tab凸起效果，設置dock: true即可實現(xiàn)。另外還支持自定義多個tabitem選項，文字/圖標/顏色均可自定義配置。

?? 最后

ok，就分享到這里。目前組件已經在nuxt項目中使用，屆時也分享出來。????