UI 框架-文档页

发表于 | 分类于

首页做好了，文档页不能光秃秃的啊

路由设计

先想想我们需要文档页通向哪些地方

这里直接给出我的设计

所属 子标题 跳转路径 文件名(*.vue)
指南 介绍 /document/introduction Introduction
指南 安装 /document/install Install
指南 快速上手 /document/start Start
组件 Button /document/button Button
组件 Dialog /document/dialog Dialog
组件 Switch /document/switch Switch
组件 Tabs /document/tabs Tabs

大致就做如上的子内容

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

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>介绍</div>
</template>
<script lang="ts">
export default {
    
};
</script>
<style lang="scss" scoped>
    
</style>

再配置 router.ts 以路由

此处使用嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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. 内容区域

容易得到如下骨架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div class="layout">
    <Topnav class="nav" />
    <div class="content">
      <aside>
        <div class="aside-list">
          <h2>指南</h2>
          <ol>
            <li>
              <router-link to="/document/introduction">介绍</router-link>
            </li>
            <li>
              <router-link to="/document/introduction">安装</router-link>
            </li>
            <li>
              <router-link to="/document/introduction">快速上手</router-link>
            </li>
          </ol>
        </div>
        <div class="aside-list">
          <h2>组件列表</h2>
          <ol>
            <li>
              <router-link to="/document/button">Button</router-link>
            </li>
            <li>
              <router-link to="/document/dialog">Dialog</router-link>
            </li>
            <li>
              <router-link to="/document/switch">Switch</router-link>
            </li>
            <li>
              <router-link to="/document/tabs">Tabs</router-link>
            </li>
          </ol>
        </div>
      </aside>
      <main class="main-body">
        <router-view :key="$route.fullPath" />
      </main>
    </div>
  </div>
</template>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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 中声明数组

1
2
3
4
5
6
7
8
9
10
11
12
setup() {
    const componentsList = ["Button", "Dialog", "Switch", "Tabs"];
    const guidancesList = [
        { path: "introduction", title: "介绍" },
        { path: "install", title: "安装" },
        { path: "start", title: "快速上手" },
    ];
    return {
        componentsList,
        guidancesList,
    };
}

然后在模板中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<aside>
    <div class="aside-list">
        <h2>指南</h2>
        <ol>
            <li v-for="(guidance, index) in guidancesList" :key="index">
                <router-link :to="'/document/' + guidance.path">
                    {{ guidance.title }}
                </router-link>
            </li>
        </ol>
    </div>
    <div class="aside-list">
        <h2>组件列表</h2>
        <ol>
            <li v-for="(component, index) in componentsList" :key="index">
                <router-link :to="'/document/' + component.toLowerCase()">
                    {{ component }}
                </router-link>
            </li>
        </ol>
    </div>
</aside>

最后补全样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$base-color: #fe9acf;
$aside-index: 10;
$active-color: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 97%,
    $base-color 97%,
    $base-color 100%
);
.content{
    > aside {
        flex-shrink: 0;
        width: 200px;
        padding: 16px 0;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 90px;
        height: 100%;
        z-index: $aside-index;
        > .aside-list {
            margin: 12px 0;
            > h2 {
                margin-bottom: 4px;
                padding: 4px 16px;
            }
            > ol {
                > li {
                    > a {
                        display: block;
                        padding: 8px 32px;
                        text-decoration: none;
                        transition: background-color 100ms;
                        &:hover {
                            color: $base-color;
                            background: $active-color;
                        }
                    }
                    .router-link-active {
                        color: $base-color;
                        background: $active-color;
                    }
                }
            }
        }

        @media (max-width: 500px) {
            background: #fdd1e8;
            width: 100%;
            height: auto;
        }
    }
}

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

效果如图

效果图

内容区

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

得到如下调整

1
2
3
4
5
6
7
8
9
10
11
.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 为

1
<Topnav toggleMenuButtonVisible class="nav" />

然后获得对菜单的引用

1
const aside = ref<HTMLDivElement>(null);
1
<aside v-if="menuVisible" ref="aside"></aside>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const menuVisible = inject<Ref<boolean>>("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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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<HTMLDivElement>(null);
        const menuVisible = inject<Ref<boolean>>("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 上

1
<div class="content" @click="hideMenu">

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

感谢阅读

--It's the end.Thanks for your read.--