4.5 KiB

Raw Blame History

布局

文件目录：@/layout/index.vue。

此布局是在vue-element-admin的基础上改造而来，并且模仿and design pro实现了三种导航模式。

实际上这个布局算是二级路由，一级路由是App.vue，这就是为什么经常会看到路由会这么写的原因：

{
    "path": "/",
    "component": Layout,
    "children": [
        {
            "path": "index",
            "name": "index",
            "component": Page,
            "meta": {"title": "首页"}
        }
    ]
}

Layout（指@/layout/index.vue）填充到 App.vue 里的 <router-view>，而真正的路由页面 Page 则填充到 Layout 里的 <router-view>。当然，如果 Layout 中没有写 <router-view>，那么只会显示布局组件。

项目中没有用到 Layout 的页面只有 @/router/define.js 里的 login、403、404、500。

此外，在写Layout这个重型组件时，已经尽可能地进行独立化（拥有作为独立组件的可能性）。目前Layout的数据控制基本由Vue.observable实现（文件都在@/layout/store下），仅有未读消息数、用户信息需要使用vuex。

侧边栏

文件目录：@/layout/component/Aside/index.vue。扩展了抽屉模式、自动隐藏这两个功能。

侧边栏不会在以下情形渲染：

PC端下选择了顶部导航模式
没有需要显示的菜单（仅不渲染dom）

侧边栏LOGO

文件目录：@/layout/component/Aside/Logo.vue。想更改logo地址的请修改 @/config/index.js 中的 sidebarLogoUrl，或者自己重写（需要注意侧边栏的折叠情况）

侧边栏菜单

侧边栏菜单借助了 @/component/menu/NavMenu/item.vue 来渲染菜单项，具体配置请查看路由配置。

侧边栏菜单扩展了以下功能：

点击已激活的菜单可刷新路由
折叠时可显示父级菜单
菜单激活时自动滚动到可视区域

头部导航栏

文件目录：@/layout/component/Header/component/Navbar/index.vue。

汉堡包

文件目录：@/layout/component/Header/component/Navbar/Hamburger.vue。

PC端的行为是切换侧边栏的折叠状态，移动端是切换侧边栏在抽屉模式下的显示状态。当侧边栏无需渲染时，汉堡包同样不会渲染。

导航菜单

文件目录：@/layout/component/Header/component/Navbar/HeadMenu.vue。

头部导航菜单基本可以视为垂直版的侧边栏菜单，也具有点击已激活的菜单可刷新路由的功能，此外还扩展了以下功能：

仿ant design的响应式（目前还存在组件未更新的问题，初步判断是element-ui的问题）

头部导航菜单不会在以下情形渲染：

是移动端
PC端下选择了侧边栏导航模式

设置面板

文件目录：@/layout/component/Header/component/Navbar/SettingDrawer.vue。

设置面板的数据与Layout的数据是相互独立的，这么做是为了Layout的独立性。在设置面板中修改数据后，会将配置写入localStorage。在面板mounted时，会将localStorage中的配置数据同步到Layout的store中

::: tip 注意设置面板中的主题色修改功能默认只在dev环境下生效，为啥呢，因为还在研究原理。
想放开限制需要：

修改@/layout/component/header/navbar/component/SettingDrawer中的changeThemeColor方法
修改vue.config.js中的configureWebpack.plugins配置项 :::

头部多页签

文件目录：@/layout/component/Header/component/Tagsview/index.vue。

在原版的基础上扩展了以下功能：

平滑滚动
快捷键响应：ctrl + → 下一个页签、ctrl + ← 上一个页签

::: warning 注意多页签在启用 / 停用之间切换时，之前缓存的页签实例会清空，也就是说再次打开时会是新的页面 :::

路由页面

文件目录：@/layout/component/Page/index.vue。

页头

文件目录：@/layout/component/Page/PageHeader.vue。

将原先在头部导航栏的面包屑挪到了这里（参考dcat-admin）。这里说明一下面包屑的实现，是直接用$route.matched做的，没有考虑其他特殊情况。

不想显示页头的可以将路由配置项的meta.pageHeader设为false。

页脚

文件目录：@/layout/component/Page/component/PageFooter.vue。

只是一个静态dom，想咋改就咋改。

目前页脚全局显示，没有提供配置来隐藏。

4.5 KiB Raw Blame History

布局

侧边栏