項(xiàng)目搭建好之后，開始寫基本的布局。后臺(tái)管理系統(tǒng)的布局3大元素：頭部、側(cè)欄、主要內(nèi)容，各種布局結(jié)構(gòu)相差不大，我選擇了下圖所示的布局，其中頭部、側(cè)欄、頁簽在頁面中是固定的，只有主要內(nèi)容容器會(huì)跟隨頁面滾動(dòng)。

Layout布局的目錄結(jié)構(gòu)

｜- layout
    ｜- header                 // 頭部
        index.vue
    ｜- sidebar                // 側(cè)欄
        index.vue
        SidebarItem.vue        // 側(cè)欄菜單遞歸組件
    ｜- tags                   // 頁簽
        index.vue
    index.vue                  // 布局入口

代碼就不貼了，倉庫有??

側(cè)欄 Sidebar

側(cè)欄使用el-menu組件，考慮到實(shí)際項(xiàng)目中可能不止2級(jí)菜單，所以直接使用遞歸組件實(shí)現(xiàn)。

側(cè)欄的數(shù)據(jù)直接來自于我們配置的前端路由，后期會(huì)考慮增加多種側(cè)邊菜單路由掛載方式。

布局樣式實(shí)現(xiàn)

最開始我做布局的樣式，是通過CSS計(jì)算主要內(nèi)容的高度，讓滾動(dòng)條只出現(xiàn)在主要內(nèi)容容器內(nèi)，這樣就不用對頭部、頁簽應(yīng)用 position:fixed,也可以實(shí)現(xiàn)這些元素的固定。

在最新的一版，因?yàn)橄胍獙?shí)現(xiàn)更有意思的效果——當(dāng)主要內(nèi)容滾動(dòng)到頭部，若隱若現(xiàn)的感覺（此處參考了tailwind官網(wǎng)），重新修改了布局的樣式

backdrop-filter

頭部、側(cè)欄、頁簽都使用position:fixed固定，主要內(nèi)容區(qū)域不再限制高度，讓它在整個(gè)頁面上下滾動(dòng)。
滾動(dòng)到頭部下面的效果，主要使用CSS屬性 backdrop-filter

backdrop-filter?CSS?屬性可以讓你為一個(gè)元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）。因?yàn)樗m用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

此處使用的是tw-backdrop-blur: blur(4px) ，backdrop-filter是一個(gè)很有意思的CSS屬性，很像Photo shop中的圖層混合模式，大家感興趣的話可以去MDN詳細(xì)查閱并親自試一試。

對應(yīng)tailwind中的backdrop-blur-sm https://www.tailwindcss.cn/docs/backdrop-blur#class-reference

暗黑模式CSS切換

方式1. tailwind通過增加dark:來標(biāo)記暗黑模式下使用的class

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

方式2. element plus預(yù)設(shè)的暗黑模式，可以通過使用CSS變量切換樣式

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

方式3. 直接書寫暗黑模式下的CSS

因?yàn)榘岛谀Ｊ綄?shí)際就是在html標(biāo)簽增加了.dark類，所以直接針對.dark書寫對應(yīng)css即可

目前在項(xiàng)目代碼中，1、2兩種方式都在使用，因?yàn)槲疫€沒確定哪種更好，還需要多嘗試，第3種開始也使用過，后來使用1，2取代之。

實(shí)現(xiàn)一鍵切換暗黑模式

上面說了樣式的實(shí)現(xiàn)，那么如何實(shí)現(xiàn)在頭部點(diǎn)擊一下就自由切換白天黑夜呢？

這里使用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文件夾建立對應(yīng)路由ts，即可讓所需頁面應(yīng)用上面的布局

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: '關(guān)于',
          icon: 'Mic',
          order: 100
        },
        component: () => import('~/views/system/About.vue')
      }
      ...
    ]
  },
  ...

Keep-Alive 和唯一根節(jié)點(diǎn)

Vue3在模板文件中不需要唯一根節(jié)點(diǎn)，然而當(dāng)我使用keep-alive的時(shí)候，發(fā)現(xiàn)如果使用了多個(gè)根節(jié)點(diǎn)，點(diǎn)擊對應(yīng)路由打開頁面是空白的，transition也失效了。

所以盡管不需要唯一根節(jié)點(diǎn)這個(gè)新特性看起來很誘人，我最終還是放棄了。

<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>

至此，一個(gè)簡單的布局就完成了，接下來可以愉快的寫一些功能頁面了。文章來源地址http://www.zghlxwxcb.cn/news/detail-589598.html

到了這里，關(guān)于從零開始Vue3+Element Plus的后臺(tái)管理系統(tǒng)(二)——Layout頁面布局的實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！