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

感谢阅读 ☕