04 - Vue3 UI Framework - 文檔頁

官網的首頁做完了，接下來開始做官網的文檔頁 傳回閱讀清單點選 這裡

先想想我們需要文檔頁通向哪些地方，這裡直接給出我的設計：

所屬

子标題

跳轉路徑

檔案名(*.vue)

指南

介紹

/document/introduction

Introduction

安裝

/document/install

Install

快速上手

/document/start

Start

元件

Button

/document/button

Dialog

/document/dialog

Switch

/document/switch

Tabs

/document/tabs

大緻就做如上的子内容

然後在 <code>src/components</code> 目錄下建立需要的檔案們，此處舉例 <code>Introduction.vue</code>

再配置 <code>router.ts</code> 以路由

此處使用嵌套路由

然後搭個骨架吧，已知文檔頁要顯示

頂邊欄

菜單

内容區域

容易得到如下骨架

然後加上基本的布局樣式表

重複代碼不少，可以優化一下，先在 <code>script</code> 中聲明數組：

然後在模闆中引入

最後補全樣式表

就可以做到移動的時候會浮光的側邊欄了。

先填充一下文檔，然後用 <code>border</code> 法調整文本位置，得到如下調整

效果就不貼了，反正隻是 <code>padding</code> 的調整

在文檔頁，還應當可以控制頂邊欄上的”彈出菜單”按鍵的是否可見，顯然預設是允許在文檔頁顯示的，是以在模闆中調整 <code>Topnav</code> 為

然後獲得對菜單的引用

再讀取 <code>App.vue</code> 提供的 <code>menuVisible</code>，并實作隐藏菜單的方法

是以有如下 <code>script</code>

取得關閉方法後，通過事件委托，将方法挂載到 <code>div.content</code> 上

即可實作點選空白處也可以關閉彈出菜單了。

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

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕