从零开始写一个Vue3+Element Plus的后台管理系统(二)——Layout页面布局的实现

项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。

Layout布局的目录结构

｜- layout
    ｜- header                 // 头部
        index.vue
    ｜- sidebar                // 侧栏
        index.vue
        SidebarItem.vue        // 侧栏菜单递归组件
    ｜- tags                   // 页签
        index.vue
    index.vue                  // 布局入口

代码就不贴了，仓库有😄

侧栏 Sidebar

侧栏使用el-menu组件，考虑到实际项目中可能不止2级菜单，所以直接使用递归组件实现。

侧栏的数据直接来自于我们配置的前端路由，后期会考虑增加多种侧边菜单路由挂载方式。

布局样式实现

最开始我做布局的样式，是通过CSS计算主要内容的高度，让滚动条只出现在主要内容容器内，这样就不用对头部、页签应用 position:fixed,也可以实现这些元素的固定。

在最新的一版，因为想要实现更有意思的效果——当主要内容滚动到头部，若隐若现的感觉（此处参考了tailwind官网），重新修改了布局的样式

backdrop-filter

头部、侧栏、页签都使用position:fixed固定，主要内容区域不再限制高度，让它在整个页面上下滚动。 滚动到头部下面的效果，主要使用CSS属性 backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

此处使用的是tw-backdrop-blur: blur(4px) ，backdrop-filter是一个很有意思的CSS属性，很像Photo shop中的图层混合模式，大家感兴趣的话可以去MDN详细查阅并亲自试一试。

对应tailwind中的backdrop-blur-sm www.tailwindcss.cn/docs/backdr…

暗黑模式CSS切换

方式1. tailwind通过增加dark:来标记暗黑模式下使用的class

<div class="v-header backdrop-blur-sm bg-white/75 dark:bg-black/75">

方式2. element plus预设的暗黑模式，可以通过使用CSS变量切换样式

border: 1px solid var(--el-border-color);
background: var(--el-fill-color-blank);

方式3. 直接书写暗黑模式下的CSS

因为暗黑模式实际就是在html标签增加了.dark类，所以直接针对.dark书写对应css即可

目前在项目代码中，1、2两种方式都在使用，因为我还没确定哪种更好，还需要多尝试，第3种开始也使用过，后来使用1，2取代之。

实现一键切换暗黑模式

上面说了样式的实现，那么如何实现在头部点击一下就自由切换白天黑夜呢？

这里使用vueuse，直接贴主要代码

<el-switch
        v-model="darkMode"
        inline-prompt
        :active-icon="Moon"
        :inactive-icon="Sunny"
        class="mr-2"
        @change="toggleDark()"
        style="--el-switch-on-color: #0960bd; --el-switch-off-color: #ff6600"
      />

import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue'

const isDark = useDark()
let darkMode = ref(false)
darkMode.value = isDark.value

const toggleDark = useToggle(isDark)

嵌套路由

在router文件夹建立对应路由ts，即可让所需页面应用上面的布局

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '~/layout/index.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/dashboard/workbench',
    children: [{
        path: '/about',
        name: 'about',
        meta: {
          title: '关于',
          icon: 'Mic',
          order: 100
        },
        component: () => import('~/views/system/About.vue')
      }
      ...
    ]
  },
  ...

Keep-Alive 和唯一根节点

Vue3在模板文件中不需要唯一根节点，然而当使用keep-alive的时候，如果使用了多个根节点，点击对应路由打开页面是空白的，transition也失效了。所以在路由菜单对应的页面文件中，我们需要使用唯一根节点，在其他子组件中可以使用多个根节点的方式，可以根据自己的需要灵活调整。

<div class="main-content" :class="{ 'content-collapse': sidebar.collapse }">
    <router-view v-slot="{ Component }">
      <transition name="move" mode="out-in">
        <keep-alive :include="tags.nameList">
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>
  </div>

至此，一个简单的布局就完成了，接下来可以愉快的写一些功能页面了。

项目地址

本项目GIT地址：github.com/lucidity99/…

如果有帮助，给个star ✨ 点个赞👍