04 - Vue3 UI Framework - 文档页

官网的首页做完了，接下来开始做官网的文档页

返回阅读列表点击

路由设计

先想想我们需要文档页通向哪些地方，这里直接给出我的设计：

大致就做如上的子内容

然后在 src/components 目录下新建需要的文件，此处举例 Introduction.vue

再配置 router.ts 以路由

此处使用嵌套路由

// router.ts
import { createWebHistory, createRouter } from 'vue-router'
import Home from './views/Home.vue'
import Document from './views/Document.vue'
import Introduction from './components/Introduction.vue'
import Install from './components/Install.vue'
import Start from './components/Start.vue'
import Button from './components/Button.vue'
import Dialog from './components/Dialog.vue'
import Switch from './components/Switch.vue'
import Tabs from './components/Tabs.vue'

const history = createWebHistory()
const router = createRouter({
  history,
  routes: [
    { path: '/', component: Home },
    {
      path: '/document', component: Document, children: [
        { path: '', redirect: '/document/introduction' }, // 默认进入介绍页面
        { path: 'introduction', component: Introduction },
        { path: 'install', component: Install },
        { path: 'start', component: Start },
        { path: 'button', component: Button },
        { path: 'dialog', component: Dialog },
        { path: 'switch', component: Switch },
        { path: 'tabs', component: Tabs },
      ]
    }
  ]
})
export default router

骨架

然后搭个骨架吧，已知文档页要显示

1. 顶边栏
2. 菜单
3. 内容区域

容易得到如下骨架

然后加上基本的布局样式表

.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    > .nav {
        flex-shrink: 0;
    }
    > .content {
        flex-grow: 1;
        padding-top: 90px;
        padding-left: 210px;
        @media (max-width: 500px) {
            padding-left: 0;
        }
    }
}
.content {
    display: flex;
}

侧边栏

重复代码不少，可以优化一下，先在 script 中声明数组：

setup() {
    const componentsList = ["Button", "Dialog", "Switch", "Tabs"];
    const guidancesList = [
        { path: "introduction", title: "介绍" },
        { path: "install", title: "安装" },
        { path: "start", title: "快速上手" },
    ];
    return {
        componentsList,
        guidancesList,
    };
}

然后在模板中引入

最后补全样式表

就可以做到移动的时候会浮光的侧边栏了。

内容区

先填充一下文档，然后用 border 法调整文本位置，得到如下调整

.content > main {
    overflow: auto;
    flex-grow: 1;
    padding: 16px;
    background: white;
    margin-top: 4px;
    margin-right: 10px;
    @media (max-width: 500px) {
        margin-left: 10px;
    }
}

效果就不贴了，反正只是 padding 的调整

功能

在文档页，还应当可以控制顶边栏上的”弹出菜单”按键的是否可见，显然默认是允许在文档页显示的，所以在模板中调整 Topnav 为

然后获得对菜单的引用

const aside = ref(null);

再读取 App.vue 提供的 menuVisible，并实现隐藏菜单的方法

const menuVisible = inject>("menuVisible");
const hideMenu = (event) => {
    let target: Node = event.target;
    if (!(target instanceof HTMLAnchorElement)) {
        while (target.parentNode && target.parentNode !== document.body) {
            target = target.parentNode;
            if (target === aside.value) {
                return;
            }
        }
    }
    if (document.documentElement.clientWidth <= 500) {
        menuVisible.value = false;
    }
};

所以有如下 script

import Topnav from "../components/Topnav.vue";
import { inject, ref, Ref } from "vue";
export default {
    components: {
        Topnav,
    },
    setup() {
        const componentsList = ["Button", "Dialog", "Switch", "Tabs"];
        const guidancesList = [
            { path: "introduction", title: "介绍" },
            { path: "install", title: "安装" },
            { path: "start", title: "快速上手" },
        ];
        const aside = ref(null);
        const menuVisible = inject>("menuVisible");
        const hideMenu = (event) => {
            let target: Node = event.target;
            if (!(target instanceof HTMLAnchorElement)) {
                while (target.parentNode && target.parentNode !== document.body) {
                    target = target.parentNode;
                    if (target === aside.value) {
                        return;
                    }
                }
            }
            if (document.documentElement.clientWidth <= 500) {
                menuVisible.value = false;
            }
        };
        return {
            componentsList,
            guidancesList,
            aside,
            menuVisible,
            hideMenu,
        };
    },
};

取得关闭方法后，通过事件委托，将方法挂载到 div.content 上

即可实现点击空白处也可以关闭弹出菜单了。

运行效果

项目地址 ??

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

官网地址 ??

JeremyUI: https://ui.jeremywu.top

感谢阅读 ?