02 - Vue3 UI Framework - 頂部邊欄

頂部邊欄比較簡單，而且首頁和文檔頁都需要，是以我們先從頂部邊欄做起 前文回顧點選 這裡 🍰 傳回閱讀清單點選 這裡

首先，在 <code>components</code> 檔案夾下，建立一個 <code>vue</code> 元件，命名為 <code>Topnav.vue</code> ，然後快速建立 <code>vue</code> 模闆，代碼如下：

點選檢視代碼

分析頂部邊欄的結構，可以得出如下表格資訊：

功能

位置

預設狀态

小于 500 px 時狀态

首頁跳轉入口

左側

可見

居中

文檔頁跳轉入口

右側

不可見

展開菜單按鈕

頁面結構代碼如下：

考慮到後續頂部菜單項擴充友善，這裡最好做成一個清單

頂邊邊欄中的彈出菜單按鍵，可以在引入它的元件中，被設定是否可見，那麼應當有一個 <code>Boolean</code> 類型的變量來控制可見，且需要提供一個方法，控制菜單本體是否可見，但是，現在又犯難了——菜單本體是屬于文檔頁的，而不是屬于頂邊欄的。如何跨元件控制呢 ？

回顧需求分析可得，通過彈出菜單按鍵，以及視口寬度，共同控制菜單是否可見，其中，視口寬度顯然是一個全局屬性，那麼理應在 <code>App.vue</code> 中控制，于是我們在 <code>App.vue</code> 中定義其是否可見，并通過 <code>provide/inject</code> <code>API</code> 暴露給子元件，相關代碼如下：

初始化時，可以根據視口寬度決定頂邊欄的彈出菜單按鍵是否可見，并監聽視口大小變化，根據視口寬度自動更新控制變量。

即 <code>Topnav.vue</code> 代碼如下：

此處的 <code>inject</code> 需要注明變量的類型。因為 <code>menuVisible</code> 聲明的時候是 <code>ref(true|false)</code>，是以其類型為 <code>Ref&lt;boolean&gt;</code>

盡量優化使用者體驗，我們這裡做個簡單的樣式美化，底部采用漸變線的分割效果：

至此，我們的頂部邊欄元件已經完成了，接下來，我們把這個元件引入到 <code>App.vue</code> 中看下實際運作效果吧！

GitHub: https://github.com/JeremyWu917/jeremy-ui

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕