实现一个简单的后台架子(侧边栏菜单渲染,折叠,黑白主题,组件主题色,全屏,路由快捷栏)

目录

侧边栏菜单渲染

侧边栏折叠

黑白主题

全屏切换

切换组件主题色

tab快捷栏

代码

---

侧边栏菜单渲染

结合ElementPlus组件库进行实现

新建的Vue3项目,引入了格式化样式normalize.css和ElementPlus,并进行了全局引入

并进行了全局引入

设置高度为100%

粘贴ElementPlus的布局容器代码,到HomeView.vue文件中,并进行简单修改

<template><div class="contioner"><el-container class="layout-container-demo" style="height: 100%"><!-- 侧边栏 START --><el-aside width="200px"><el-scrollbar><el-menu router><!-- 一级菜单 --><el-menu-item index="1-4-1">一级菜单</el-menu-item><!-- 子级菜单 --><el-sub-menu index="1"><template #title><el-icon><message /></el-icon>子级菜单</template><el-menu-item index="1-4-1">孙子菜单1</el-menu-item><el-sub-menu index="1-4"><template #title>孙子菜单2</template><el-menu-item index="1-4-1">重孙菜单</el-menu-item></el-sub-menu></el-sub-menu></el-menu></el-scrollbar></el-aside><!-- 侧边栏 END --><!-- 内容区 START --><el-container><el-header style="text-align: right; font-size: 12px"><div class="toolbar"><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header><el-main><el-scrollbar><!-- 路由出口,可以展示子级菜单内容 --><router-view></router-view></el-scrollbar></el-main></el-container><!-- 内容区 END --></el-container></div>
</template><script setup lang="ts">
import { Message, Setting } from '@element-plus/icons-vue'
</script><style scoped>
.contioner {width: 100%;height: 100%;
}.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {color: var(--el-text-color-primary);background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {border-right: none;
}
.layout-container-demo .el-main {padding: 0;
}
.layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;
}
</style>

效果图如下,一个简单的后台架子就出来了

然后开始路由新增

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView,children: [{path: '/test1',name: 'test1',component: () => import('@/views/ParentPage.vue'),},{path: '/test2',name: 'test2',children: [{path: '/test3',name: 'test3',component: () => import('@/views/SonPage.vue'),},{path: '/test4',name: 'test4',children: [{path: '/test5',name: 'test5',component: () => import('@/views/SonPage.vue'),},],},],},],},{path: '/login',name: 'login',component: () => import('../views/AboutView.vue'),},],
})export default router

在views下新增ParentPage.vue和SonPage.vue文件

路由定义好了,就可以在HomeView.vue文件中引入路由数据了

<script setup lang="ts">
import { Message, Setting } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'const router = useRouter()// 路由数据
const routes = computed(() => {return router.getRoutes().filter(p => p.path === '/')[0].children
})
</script>

多级菜单渲染,需要用到递归组件,所以我们把侧边栏菜单展示进行封装,views下新建MenuTree.vue

<template><div><template v-for="i in routes" :key="i.path"><!-- 一级菜单 --><el-menu-item :index="i.path" v-if="!i.children">{{ i.path }}</el-menu-item><!-- 子级菜单 --><el-sub-menu :index="i.path" v-else><template #title><el-icon><message /></el-icon>{{ i.path }}</template><!-- 使用递归组件,传递嵌套路由数据 --><MenuTree :routes="i.children"></MenuTree></el-sub-menu></template></div>
</template><script setup lang="ts">
import { Message } from '@element-plus/icons-vue'
import type { RouteRecordRaw } from 'vue-router'defineProps({routes: {type: Array<RouteRecordRaw>,default: () => [],},
})
</script>

最后在HomeView.vue中引入此组件

      <!-- 侧边栏 START --><el-aside width="200px"><el-scrollbar><el-menu router><MenuTree :routes="routes"></MenuTree></el-menu></el-scrollbar></el-aside><!-- 侧边栏 END -->

此时就完成了侧边栏菜单的渲染

侧边栏折叠

然后再加一个侧边栏折叠的功能

添加一个按钮到头部,修改HomeView.vue

结构处修改:<el-header><el-button type="primary" size="small">折叠/展开</el-button><div class="toolbar"><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header>样式处修改:
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);display: flex;justify-content: space-between;align-items: center;
}

页面效果

然后修改侧边栏代码  修改HomeView.vue

结构处修改<!-- 侧边栏 START --><!-- width="collapse" 可以让侧边栏宽度正好合适!!! --><el-aside width="collapse"><el-scrollbar><el-menu router class="el-menu-vertical-demo" :collapse="isCollapse"><MenuTree :routes="routes"></MenuTree></el-menu></el-scrollbar></el-aside><!-- 侧边栏 END -->逻辑处新增:
// 折叠状态
const isCollapse = ref(false)
// 折叠/展开
const collapseChange = () => {isCollapse.value = !isCollapse.value
}样式处新增:
/* 侧边栏宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;
}

MenuTree.vue修改

<template><template v-for="i in routes" :key="i.path"><!-- 一级菜单 --><el-menu-item :index="i.path" v-if="!i.children">{{ i.path }}</el-menu-item><!-- 子级菜单 --><el-sub-menu :index="i.path" v-else><template #title><el-icon><message /></el-icon><!-- 标题一定要用标签包裹,不然折叠的时候会显示一部分字!!! --><span>{{ i.path }}</span></template><!-- 使用递归组件,传递嵌套路由数据 --><MenuTree :routes="i.children"></MenuTree></el-sub-menu></template>
</template>

看下效果:

• 折叠

• 展开

黑白主题

然后再加个黑白主题吧(ElementPlus本身就有此功能)暗黑模式 | Element Plus

首先在main.ts中引入暗色主题

import 'element-plus/theme-chalk/dark/css-vars.css'

然后在HomeView.vue中新增切换按钮并添加逻辑处理

结构处修改:       <el-header><el-button type="primary" size="small" @click="collapseChange">折叠/展开</el-button><div class="toolbar"><el-switchinline-promptv-model="theme"active-text="暗黑"inactive-text="白亮"@change="toggle"/><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header>逻辑处修改:
// 引入切换主题的hook
import { useDark, useToggle } from '@vueuse/core'// 主题状态
const theme = ref(localStorage.getItem('theme') === 'dark' ? true : false)// 切换主题
const isDark = useDark({// 存储到localStorage中的Key 根据自己的需求更改storageKey: 'theme',// 暗黑class名字valueDark: 'dark',// 高亮class名字valueLight: 'light',
})
const toggle = useToggle(isDark)

但是这个只实现了在组件库的主题切换,我们自己写的代码也要实现主题切换,可以在assets文件夹下新建theme文件夹,再新建theme.scss文件

// 主题
$themes: (// 白亮: 设置一些字体颜色,背景色什么的light:(background: #fff,color: #000,textColor: #000,),// 暗黑dark:(background: #121212,color: #fff,textColor: #fff,)
);// 当前主题
$curTheme: light;// 混合
// @mixin useTheme() {
//     html[data-theme='light'] & {
//         background-color: #fff;
//         color: #000;
//     }
//     html[data-theme='dark'] & {
//         background-color: #121212;
//         color: #fff;
//     }
// }// 混合优化（遍历上面的主题）
@mixin useTheme() {@each $key, $value in $themes {$curTheme: $key !global; // 当前的主题html[data-theme='#{$key}'] & {// & 表示传入什么选择器就是什么选择器@content; // 类似于插槽，样式可以进行传入}}
}// 生成对应主题的变量
@function getVar($key) {$themeMap: map-get($themes, $curTheme);@return map-get($themeMap, $key);
}

全局引入此scss文件

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'// https://vite.dev/config/
export default defineConfig({plugins: [vue(), vueJsx()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),},},// 配置全局scss文件css: {preprocessorOptions: {// 引入全局的scss文件scss: {additionalData: `@import "./src/assets/theme/theme.scss";`,},},},
})

找个测试页面测试即可

<template><div><h2>父级页面</h2><div class="box"></div><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div></div>
</template><script setup lang="ts"></script><style scoped>
.box {width: 100%;height: 200px;/* 使用主题变量 */background-color: getVar('background');
}
</style>

全屏切换

再做一个切换全屏的效果

安装一个screenfull插件

npm i screenfull

然后修改HomeView.vue的代码

结构处修改:        
<el-header><el-button type="primary" size="small" @click="collapseChange">折叠/展开</el-button><div class="toolbar"><el-switchinline-promptv-model="theme"active-text="暗黑"inactive-text="白亮"@change="toggle"/><el-button type="primary" size="small" @click="screenfullChange">全屏/非全屏</el-button><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header>逻辑处修改:
import screenfull from 'screenfull'
import { ElMessage } from 'element-plus'// 全屏/非全屏
const screenfullChange = () => {if (!screenfull.isEnabled) {return ElMessage({ message: '你的浏览器不支持全屏', type: 'warning' })}screenfull.toggle()
}

切换组件主题色

如果不喜欢ElementPlus的组件配色,也可以自己进行修改:  主题 | Element Plus

新建styles文件夹,然后再新建element文件夹,然后再新建index.scss文件,粘贴以下代码

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': green,),),
);// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

然后再修改main.ts,更换引入的scss文件

import ElementPlus from 'element-plus'// import 'element-plus/dist/index.css'  // 更换完下面的scss文件，因为下面的scss文件中已经引入了所有样式
import './styles/element/index.scss'

此时就已经修改成功了,组件主题色都变成了我们设置的颜色

但是如果想通过按钮修改主题色呢?比如下面的效果

我们应该这么做

新增一个处理设置组件主题颜色的函数:在utils文件夹下新增theme.ts

// import { useCssVar } from '@vueuse/core'type RGB = {r: numberg: numberb: number
}const rgbWhite = {r: 255,g: 255,b: 255,
}
const rgbBlack = {r: 0,g: 0,b: 0,
}function componentToHex(c: number): string {const hex = Math.round(c).toString(16)return hex.length === 1 ? '0' + hex : hex
}function rgbToHex(rgb: RGB): string {return `#${componentToHex(rgb.r)}${componentToHex(rgb.g)}${componentToHex(rgb.b)}`
}function mix(color: RGB, mixColor: RGB, weight: number): RGB {return {r: color.r * (1 - weight) + mixColor.r * weight,g: color.g * (1 - weight) + mixColor.g * weight,b: color.b * (1 - weight) + mixColor.b * weight,}
}/*** hex 转换为 rgb* @param hex 例如 #FF0000*/
function hexToRGB(hex: string): RGB {if (!/^[0-9A-Fa-f]{3}$|[0-9A-Fa-f]{6}$/.test(hex)) {throw new Error('请传入合法的16进制颜色值，eg: #FF0000')}// 移除可能存在的 # 符号hex = hex.replace('#', '')// 确保十六进制代码是有效的// 返回 RGB 对象return {r: parseInt(hex.slice(0, 2), 16),g: parseInt(hex.slice(2, 4), 16),b: parseInt(hex.slice(4, 6), 16),}
}/*** 修改 element-plus的颜色主题*/
function updateElementPlusTheme(type: string, baseColor: string): void {// 针对 element-plus 进行修改const colorArray: Record<string, string>[] = [{ className: `--el-color-${type}`, color: rgbToHex(mix(hexToRGB(baseColor), rgbBlack, 0)) },{className: `--el-color-${type}-dark-2`,color: rgbToHex(mix(hexToRGB(baseColor), rgbBlack, 0.2)),},{className: `--el-color-${type}-light-3`,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.3)),},{className: `--el-color-${type}-light-5`,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.5)),},{className: `--el-color-${type}-light-7`,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.7)),},{className: `--el-color-${type}-light-8`,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.78)),},{className: `--el-color-${type}-light-9`,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.85)),},]// document.documentElement 是全局变量时// const el = document.documentElementcolorArray.forEach((item) => {// 下面两种方式都可以// 方法1: 需要把顶部的导入解开// const color = useCssVar(item.className, document.documentElement)// color.value = item.color// 方法2:document.documentElement.style.setProperty(item.className, item.color)// 方法3: 把上面的el解开// 获取 css 变量// getComputedStyle(el).getPropertyValue(item.className)// 设置 css 变量// el.style.setProperty(item.className, item.color)})
}export { type RGB, hexToRGB, rgbToHex, updateElementPlusTheme }

修改HomeView.vue:

结构处修改:<!-- 颜色选择器 --><el-color-pickerv-model="color":predefine="predefineColors"@change="setThemeColor"color-format="hex":show-alpha="false"/>逻辑处修改:
import { updateElementPlusTheme } from '@/utils/theme'// 颜色
const color = ref(localStorage.getItem('theme-color') || '#409EFF')
// 组件预定义颜色
const predefineColors = ref(['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','hsv(51, 100, 98)','hsva(120, 40, 94, 0.5)','hsl(181, 100%, 37%)','hsla(209, 100%, 56%, 0.73)','#c7158577',
])/*** 设置主题颜色* @param type 类型* @param color 颜色*/
const setThemeColor = (color: string, type = 'primary') => {// 存入本地主题颜色的值if (localStorage.getItem('theme-color') !== color) {localStorage.setItem('theme-color', color)}// 更新 Element Plus 主题updateElementPlusTheme(type, color)
}

看下效果

但是刷新后还是会丢失,所以我们在App.vue中重新设置下组件的主题颜,刷新后也不会丢失

import { onMounted } from 'vue'
import { updateElementPlusTheme } from './utils/theme'onMounted(() => {updateElementPlusTheme('primary',localStorage.getItem('theme-color') || '#409EFF',)
})

tab快捷栏

设置快捷栏需要用到pinia持久化，所以我们要先下载一个持久化插件

npm i pinia-plugin-persistedstate

然后修改counter.ts

import { ref } from 'vue'
import { defineStore, createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import router from '@/router'
import { ElMessage } from 'element-plus'// 创建仓库
const pinia = createPinia()// 使用插件进行持久化存储
pinia.use(piniaPluginPersistedstate)interface IHistoryList {path: stringname: string
}export const useCounterStore = defineStore('counter',() => {const historyList = ref<IHistoryList[]>([])// 设置菜单历史记录列表的方法const setHistoryList = ({ path, name }: IHistoryList) => {// 没有就添加if (historyList.value.findIndex(i => i.path === path) === -1) {historyList.value.push({ path, name })}}// 清除某个菜单历史记录列表的方法const clearHistory = (path: string) => {// 如果只剩下一个路由，则弹窗提示，不操作if (historyList.value.length === 1) {return ElMessage.warning('只剩下一个路由了，无法删除')}// 跳转到后一个路由const index = historyList.value.findIndex(i => i.path === path)// 如果是最后一个路由则跳转到前一个路由if (index === historyList.value.length - 1) {router.push(historyList.value[index - 1].path)} else {router.push(historyList.value[index + 1].path)}// 删除该路由historyList.value = historyList.value.filter(i => i.path !== path)}return { historyList, setHistoryList, clearHistory }},{// 设置持久化persist: {key: 'settingInfo',storage: sessionStorage,},},
)

然后还需要修改一下路由配置，也就是router文件夹下的index.ts。设置了首页重定向，然后新增了一个全局路由前置守卫（监听路由跳转，好往路由历史数组里添加路由信息）

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useCounterStore } from '@/stores/counter'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView,// 首页进来重定向到test1redirect: '/test1',children: [{path: '/test1',name: 'test1',component: () => import('@/views/ParentPage.vue'),},{path: '/test2',name: 'test2',children: [{path: '/test3',name: 'test3',component: () => import('@/views/SonPage.vue'),},{path: '/test4',name: 'test4',children: [{path: '/test5',name: 'test5',component: () => import('@/views/SonPage.vue'),},],},],},],},{path: '/login',name: 'login',component: () => import('../views/AboutView.vue'),},],
})// 全局前置路由守卫
router.beforeEach(to => {const path = to.pathconst name = to.name as stringuseCounterStore().setHistoryList({ path, name })return true
})export default router

最后修改HomeView.vue文件
 

结构处修改：<el-header><div class="header"><el-button type="primary" size="small" @click="collapseChange">折叠/展开</el-button><div class="toolbar"><el-switch inline-prompt v-model="theme" active-text="暗黑" inactive-text="白亮" @change="toggle" /><el-button type="primary" size="small" @click="screenfullChange">全屏/非全屏</el-button><!-- 颜色选择器 --><el-color-picker v-model="color" :predefine="predefineColors" @change="setThemeColor" color-format="hex":show-alpha="false" /><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></div><el-tag v-for="tag in store.historyList" :key="tag.name" closable @click="toPath(tag.path)"@close="delHistory(tag.path)" class="ml-2">{{ tag.name }}</el-tag></el-header>逻辑处修改：
import { useCounterStore } from '@/stores/counter'const store = useCounterStore()// 删除历史记录
const delHistory = (path: string) => {store.clearHistory(path)
}
// 跳转路由
const toPath = (path: string) => {router.push(path)
}样式处修改：
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}.header {display: flex;justify-content: space-between;align-items: center;
}
.ml-2 {margin-left: 8px;
}

效果：

至于想实现下面的效果

可以使用ElementPlus的Dropdown组件，做出修改即可，本质就是操作pinia中存储的路由历史数组

代码

通过网盘分享的文件：test.zip
链接: https://pan.baidu.com/s/1mmGT_xjW52s9dKUVJNZE2Q?pwd=atm8 提取码: atm8

写的很糙，关注实现即可。有空闲时间了，还会加上中英文切换