当前位置: 首页 > news >正文

vue3后台管理系统之layout组件的搭建

1.1静态布局

<template><div class="layout_container"><!-- 左侧导航 --><div class="layout_slider"></div><!-- 顶部导航 --><div class="layout_tabbar"></div><!-- 内容展示区 --><div class="layout_main"></div></div>
</template><!-- <script lang="ts"></script> --><style scoped lang="scss">
.layout_container {width: 100%;height: 100vh;.layout_slider {color: white;width: $base-menu-width;height: 100vh;background: $base-menu-background;transition: all 0.3s;.scrollbar {width: 100%;height: calc(100vh - $base-menu-logo-height);.el-menu {border-right: none;}}}.layout_tabbar {position: fixed;width: calc(100% - $base-menu-width);height: $base-tabbar-height;top: 0px;left: $base-menu-width;transition: all 0.3s;background-color: aqua;&.fold {width: calc(100vw - $base-menu-min-width);left: $base-menu-min-width;}}.layout_main {position: absolute;width: calc(100% - $base-menu-width);height: calc(100vh - $base-tabbar-height);left: $base-menu-width;top: $base-tabbar-height;padding: 20px;overflow: auto;transition: all 0.3s;&.fold {width: calc(100vw - $base-menu-min-width);left: $base-menu-min-width;}}
}
</style>

//项目提供scss全局变量
// 左侧菜单宽度
//定义项目主题颜色//左侧的菜单的宽度
$base-menu-width     :260px;
//左侧菜单的背景颜色
$base-menu-background:#001529;
$base-menu-min-width :50px;// 顶部导航的高度
$base-tabbar-height:50px;//左侧菜单logo高度设置
$base-menu-logo-height:50px;//左侧菜单logo右侧文字大小
$base-logo-title-fontSize:20px;

1.2动态logo和标题搭建

src下创建setting.ts

// 项目图标和标题
export default {title: 'v3后台管理系统', //项目标题设置logo: '../../../../../public/logo.png', //项目配置logologoHidden: true, //logo组件是否隐藏
}

<template><div class="logo" v-if="setting.logoHidden"><img :src="setting.logo" alt="" /><p>{{ setting.title }}</p></div>
</template>
<script setup lang="ts">
import setting from '@/setting'
</script>
<style scoped lang="scss">
.logo {width: 100%;height: $base-menu-logo-height;color: white;display: flex;align-items: center;padding: 10px;img {width: 40px;height: 40px;}p {font-size: $base-logo-title-fontSize;margin-left: 10px;}
}
</style>

1.3左侧静态布局

<template><div class="layout_container"><!-- 左侧导航 --><div class="layout_slider"><Logo /><!-- 展示菜单 --><!-- 滚动组件 --><el-scrollbar class="scrollbar"><!-- 菜单组件--><el-menu background-color="#001529" text-color="white" active-text-color="yellowgreen"><el-menu-item index="1">首页</el-menu-item><el-menu-item index="1">数据大屏</el-menu-item><el-sub-menu index="2"><template #title>权限管理</template><el-menu-item index="2-1">用户管理</el-menu-item><el-menu-item index="2-2">角色管理</el-menu-item><el-menu-item index="2-3">菜单管理</el-menu-item></el-sub-menu></el-menu></el-scrollbar></div><!-- 顶部导航 --><div class="layout_tabbar"></div><!-- 内容展示区 --><div class="layout_main"><h1 style="height: 22222px; background-color: red">我是一个段落</h1></div></div>
</template>
<script setup lang="ts">
import Logo from './components/logo/index.vue'
</script><style scoped lang="scss">
.layout_container {width: 100%;height: 100vh;.layout_slider {color: white;width: $base-menu-width;height: 100vh;background: $base-menu-background;.scrollbar {width: 100%;height: calc(100vh - $base-menu-logo-height);.el-menu {border-right: none;}}}.layout_tabbar {position: fixed;width: calc(100% - $base-menu-width);height: $base-tabbar-height;top: 0px;left: $base-menu-width;background-color: aqua;}.layout_main {position: absolute;width: calc(100% - $base-menu-width);height: calc(100vh - $base-tabbar-height);left: $base-menu-width;top: $base-tabbar-height;padding: 20px;overflow: auto;background-color: yellowgreen;}
}
</style>

1.4配置左侧动态路由

store管理路由数组

//引入路由(常量路由)
import { constantRoute } from '@/router/routes'
const useUserStore = defineStore('User', {// 小仓库存储数据state: (): UserState => {return {token: GET_TOKEN(),menuRoutes: constantRoute, //仓库存储生成菜单需要数组(路由)}},

import type { RouteRecordRaw } from 'vue-router'
// 定义小仓库state数据类型
export interface UserState {token: string | nullmenuRoutes: RouteRecordRaw[]
}

传递路由数组到Menu组件

接收menuList

1.5递归组件生成菜单

修改router

添加meta

meta: {

title: ' 登录 ',

hidden: false //代表路由标题在菜单中是否隐藏

}

hidden代表是否隐藏

// 对外配置路由
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Error from '@/views/404/index.vue'
import Test from '@/views/test/index.vue'
import Layout from '@/layout/index.vue'
export const constantRoute = [{path: '/login',component: Login,name: 'login',meta: {title: ' 登录 ',hidden: false //代表路由标题在菜单中是否隐藏}},{path: '/',component: Layout,name: 'layout',meta: {title: 'layout ',hidden: false //代表路由标题在菜单中是否隐藏  true代表隐藏},children: [{path: '/home',component: Home,meta: {title: ' 首页 ',hidden: false //代表路由标题在菜单中是否隐藏}},{path: '/test',component: Test,meta: {title: ' 测试 ',hidden: false //代表路由标题在菜单中是否隐藏}}]},{path: '/404',component: Error,name: '404',meta: {title: ' 404 ',hidden: false //代表路由标题在菜单中是否隐藏}},{path: '/:pathMatch',redirect: '/404',name: 'Any',meta: {title: ' 任意路由 ',hidden: true //代表路由标题在菜单中是否隐藏}}
]

根据判断条件展示路由

<!-- eslint-disable vue/no-reserved-component-names -->
<template><template v-for="item in menuList" :key="item.path"><!-- 没有子路由 --><template v-if="!item.children"><el-menu-item :index="item.path" v-if="!item.meta.hidden"><template #title><!-- 图标 --><span>图标</span><span>{{ item.meta.title }}</span></template></el-menu-item></template><!-- 有子路由但是只有一个子路由 --><template v-if="item.children && item.children.length == 1"><el-menu-itemv-if="!item.children[0].meta.hidden":index="item.children[0].path"><template #title><!-- 图标 --><span>图标</span><span>{{ item.children[0].meta.title }}</span></template></el-menu-item></template><!-- 有子路由且个数大于一个 --><el-sub-menu:index="item.path"v-if="item.children && item.children.length > 1"><template #title><span>{{ item.meta.title }}</span></template><Menu :menuList="item.children"></Menu></el-sub-menu></template>
</template><script setup lang="ts">
defineProps(['menuList'])
</script>
<script lang="ts">
export default {// eslint-disable-next-line vue/no-reserved-component-namesname: 'Menu',
}
</script><style lang="scss" scoped></style>

递归组件实现

1.6配置菜单图标

注册所有图标#

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts// 如果您正在使用CDN引入,请删除下面一行。import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}

import SvgIcon from './SvgIcon/index.vue'
import type { App, Component } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const components: { [name: string]: Component } = { SvgIcon }
export default {install(app: App) {// 注册项目全部的全局组件Object.keys(components).forEach((key: string) => {app.component(key, components[key])})// 将element-lpus提供的图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}

在meta添加属性icon

动态组件component

<!-- 图标 --><el-icon><component :is="item.meta.icon" /></el-icon>

<!-- eslint-disable vue/no-reserved-component-names -->
<template><template v-for="item in menuList" :key="item.path"><!-- 没有子路由 --><template v-if="!item.children"><el-menu-item:index="item.path"v-if="!item.meta.hidden"@click="goRoute"><template #title><!-- 图标 --><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ item.meta.title }}</span></template></el-menu-item></template><!-- 有子路由但是只有一个子路由 --><template v-if="item.children && item.children.length == 1"><el-menu-itemv-if="!item.children[0].meta.hidden":index="item.children[0].path"><template #title><!-- 图标 --><el-icon><component :is="item.children[0].meta.icon"></component></el-icon><span>{{ item.children[0].meta.title }}</span></template></el-menu-item></template><!-- 有子路由且个数大于一个 --><el-sub-menu:index="item.path"v-if="item.children && item.children.length > 1"><template #title><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ item.meta.title }}</span></template><Menu :menuList="item.children"></Menu></el-sub-menu></template>
</template><script setup lang="ts">
defineProps(['menuList'])
// 点击菜单的回调
const goRoute = (vc: any) => {console.log(vc.index)
}
</script>
<script lang="ts">
export default {// eslint-disable-next-line vue/no-reserved-component-namesname: 'Menu',
}
</script><style lang="scss" scoped></style>

1.7配置全部路由

一般后台管理系统都有登录、首页、数据大屏、权限管理这几个功能,所以接下来配置这些路由。

// 对外配置路由
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Error from '@/views/404/index.vue'
import Role from '@/views/acl/role/index.vue'
import User from '@/views/acl/user/index.vue'
import Scree from '@/views/scree/index.vue'
import Layout from '@/layout/index.vue'
export const constantRoute = [{path: '/login',component: Login,name: 'login',meta: {icon: 'Edit',title: ' 登录 ',hidden: true //代表路由标题在菜单中是否隐藏}},{path: '/',component: Layout,name: 'layout',meta: {title: 'layout ',hidden: false, //代表路由标题在菜单中是否隐藏  true代表隐藏icon: 'Promotion'},redirect: '/home',children: [{path: '/home',component: Home,meta: {title: ' 首页 ',hidden: false, //代表路由标题在菜单中是否隐藏icon: 'HomeFilled'}}]},{path: '/scree',component: Scree,name: 'Screen',meta: {title: '数据大屏',hidden: false,icon: 'Histogram'}},{path: '/acl',component: Layout,name: 'Acl',meta: {title: '权限管理 ',icon: 'Lock'},children: [{path: '/acl/user',component: User,meta: {title: '用户管理',hidden: false, //代表路由标题在菜单中是否隐藏icon: 'User'}},{path: '/acl/role',component: Role,meta: {title: '角色管理',hidden: false, //代表路由标题在菜单中是否隐藏icon: 'UserFilled'}}]},{path: '/404',component: Error,name: '404',meta: {icon: 'Edit',title: ' 404 ',hidden: true //代表路由标题在菜单中是否隐藏}},{path: '/:pathMatch',redirect: '/404',name: 'Any',meta: {title: ' 任意路由 ',hidden: true //代表路由标题在菜单中是否隐藏}}
]

渲染layout一级路由的子路由

1.8页面加载时默认激活菜单的 index

http://www.lryc.cn/news/198857.html

相关文章:

  • Minio 文件上传(后端处理同文件判断,同一文件秒传)
  • 模拟IIC通讯协议(stm32)(硬件iic后面在补)
  • 使用注解读取properties配置文件
  • Python---练习:求世界杯小组赛的总成绩(涉及:布尔类型转换为整型)
  • vue3学习源码笔记(小白入门系列)------KeepAlive 原理
  • 边写代码边学习之mlflow
  • 基于吉萨金字塔建造优化的BP神经网络(分类应用) - 附代码
  • axios的post请求所有传参方式
  • 【c++】向webrtc学比较2: IsNewerSequenceNumber 用于NackTracker及测试
  • PRCV 2023:语言模型与视觉生态如何协同?合合信息瞄准“多模态”技术
  • 深度学习硬件配置推荐(kaggle学习)
  • 1019hw
  • 两分钟搞懂UiAutomator自动化测试框架
  • Fast DDS之Subscriber
  • 测试PySpark
  • C语言- 原子操作
  • 设置hadoop+安装java环境
  • 阿里云新加坡主机服务器选择
  • 21天打卡掌握java基础操作
  • SQL题目记录
  • Linux程序调试器——gdb的使用
  • 前端打包项目上线-nginx
  • 创龙瑞芯微RK3568参数修改(调试口波特率和rootfs文件)
  • VMware——VMware17安装WindowServer2012R2环境(图解版)
  • ModuleNotFoundError: No module named ‘torch‘
  • 采用Spring Boot框架开发的医院预约挂号系统3e3g0+vue+java
  • Jmeter性能测试(压力测试)
  • NetCore/Net8下使用Redis的分布式锁实现秒杀功能
  • openGauss学习笔记-102 openGauss 数据库管理-管理数据库安全-客户端接入之查看数据库连接数
  • lspci源码