现在当我们把菜单折叠然后再刷新浏览器,菜单又回到默认的展开状态了。我们要把展开折叠状态持久化,让它在下次进入时为关闭前的状态。为了实现这个目标,我们要引入pinia这个依赖以及它的持久化插件pinia-plugin-persistedstate。 依赖和插件 安装 npm install pinia@2.1.7 pinia-plugin-persistedstate@3.2.1...
1、效果 折叠效果--只剩图标 展开效果--有图标有文字 2、主要逻辑代码 home.vue--主页代码 <template><el-container><!-- 侧边栏菜单 --><el-asidewidth="auto"></el-aside><el-container><el-header></el-header><el-main>Main</el-main></el-container></el-container></template>import{ref, r...
1.背景 没有使用elementPlus自带的icon图标,而是自己使用的全局svg图标组件。 2.目前情况 侧边栏的结构有一级菜单,二级菜单多样性。 3.目前问题 当侧边栏涉及到收缩的时候,svg图标就显示不正常。 展开: 折叠: 4.解决方法 自己的图标用<el-icon></el-icon>包裹,图标就可以正常显示了。 4.1.代码解决方案: 标...
{value:'1-1',label:'子菜单1-1',children: [ {value:'1-1-1',label:'子菜单1-1-1'}, {value:'1-1-2',label:'子菜单1-1-2'}, ], }, {value:'1-2',label:'子菜单1-2'}, ], }, {value:'2',label:'菜单2',children: [ {value:'2-1',label:'子菜单2-1'}, {value:'2-...
完成数据转换后，我们可以使用router.addRoute方法动态地将这些路由添加到Vue应用中。这样一来，我们就实现了动态加载路由与菜单侧边栏的功能，确保了用户只能访问到有权限的菜单项。接下来，我们将详细介绍如何实现这一功能。首先，需要安装全局状态管理库pinia，并引入到我们的项目中。同时，为了使用element-plus的Icon...
页面比较简单,主要分为左侧的菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面显示区域。 我们在layout目录下创建一个index.vue来作为我们的入口文件 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 ...
注1:使用组件之间通信,完成左侧菜单折叠 4.3 LeftAside 导入相应的vue和img 5. vue组件之间传递数据(总线) 根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。 5.1 子组件往父组件传递数据(this.$emit) TopNav -> Main 5.2 父组件往子组件传递数据(props) ...
菜单管理是一套系统中最常见最核心的系统管理模块之一,我把菜单管理分成了2个部分,左边可以管理维护菜单,在菜单的最右侧可以维护每个菜单按钮权限配置 使用element-plus el-tree组件快速开发树形菜单结构,el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能 ...
vite+vue+ts+element-plus从零开发管理后台框架(09)-动态设置侧边栏和顶部左 获取菜单宽度 通过调试工具得知菜单展开时宽度为300px 编辑src/views/Main.vue,设置菜单折叠。 <el-menu router :default-active="route.path" :collapse="true"> 通过调试工具得知菜单折叠时宽度为64px...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...