依据不同的登陆人显示不同菜单,即menuList数据装菜单的数据el-menu <el-menu-item-group> <el-menu-item v-for="bean in menuList" :key="bean.menuid" > <a :href="bean.path">{{bean.menuid}}_{{bean.name}}</a> </el-menu-item> <el-menu-item index="1-5"><el-button size="small" type="danger" v-on:click="logout">logout</el-button></el-menu-item> </el-menu-item-group>
一个简单的效果，点击导航栏弹出菜单后，在菜单外点击触发失焦，自动关闭菜单 本文采用Vant组件核心：通过触发菜单内的input聚焦失焦控制显示/隐藏 导航栏：<van-nav-bar title="导航栏" left-arrow @click="handleRight"> <van-icon name="ellipsis" v-slot:right /></van-nav-bar>菜单：<div v-show="isShowMenu" class="nav-menu"> <ul> <li v-for="item in menuList" :key="item" @click="handleMenu(item)">{{ item }}</li> </ul> <input ref="MenuInput" type="text" @blur="menuBlur" /></div>.nav-menu{ position: fixed; top: 40px; right: 5px; input{ position: absolute; left: 0; bottom: 0; width: 0; height: 0; margin: 0; border: none; outline: 0; opacity: 0; -webkit-appearence: none; }}事件：export default{ name: 'custom-nav', data(){ return { isShowMenu: false,// 控制菜单 menuList: ['操作1', '操作2'],// 菜单 } }, methods: { handleMenu(item){// 点击菜单项 console.log(item) }, menuBlur(){// 输入框失焦 =》 隐藏菜单 this.isShowMenu = false }, handleRight(){// 点击导航栏右侧 this.isShowMenu = !this.isShowMenu // trigger焦点 this.$nextTick(() => { if(this.$refs.MenuInput){ this.$refs.MenuInput.focus() }else{ this.$refs.MenuInput.blur() } }) } }}问题：菜单栏点击事件handleMenu与输入框失焦menuBlur冲突 ...
问题描述动态菜单管理，用户对应角色，角色对应菜单。为用户进行设置角色，登陆系统后，用户可使用其拥有角色对应的所有菜单。功能实现很简单，这里就不进行代码的讲解了，直接讲一下我所实现的思路。实现原设计系统设置中，前台菜单遵循如下格式：menus: [ { text: ‘主导航’, group: true, children: [ { text: ‘首页’, link: ‘/main’, icon: ‘anticon anticon-compass’ }, { text: ‘系统设置’, link: ‘/setting’, icon: ‘anticon anticon-setting’ } ], }]所以最开始的思路也很简单，后台的Menu实体中存储菜单所有相关的信息。后台直接就查出当前登录用户所有的菜单，前台根据返回来的菜单数据构建前台菜单。问题能实现肯定是能实现，但我们进行设计时，考虑的不应仅仅是实现，考虑的更多的是我这么实现，效率高不高？以后好不好改？能不能被以后维护的人员快速理解？斟酌之后，断然抛弃了这种实现，因为，不能把所有的数据都放在后台。就拿icon字段来说，如果我们采用了上述实现：那当我们以后想修改前台菜单图标的时候，需要去修改后台的数据初始化。这显然不合理，以后维护的人员肯定会存在一个疑问，这是谁设计的菜单？我改个前台的图标为什么要动后台？新设计既然不能讲数据都放在后台，那前后台就各司其职。前台：包含菜单名称，菜单图标，菜单路由等信息。负责前台菜单的格式显示。后台：只保留，菜单名，菜单路由，父菜单三项信息。负责后台用户的菜单授权。核心思想就是：前台配置好所有的菜单，但默认将菜单隐藏。应用启动时，查询后台接口，获取当前用户的所有授权菜单，授权一个，前台就显示一个。前台菜单：写菜单时将hide置为true，默认隐藏。menus: [ { text: ‘主导航’, group: true, children: [ { text: ‘首页’, link: ‘/main’, hide: true, icon: ‘anticon anticon-compass’ }, { text: ‘系统设置’, link: ‘/setting’, hide: true, icon: ‘anticon anticon-setting’ } ] }]然后就是具体的逻辑，先获取前台的菜单，即所有菜单。获取当前用户授权菜单列表，以路由表示该菜单唯一，如果路由被授权，就把hide置为false。/** * 获取所有被授权的菜单 */getAllAuthMenu(): Observable<Array<Menu>> { // 获取前台菜单 const menus = AppConfig.menus as Array<Menu>; return this.httpClient.get(’/menu/allAuthMenu’) .pipe(map((allAuthMenus: Array<WebAppMenu>) => { // 对菜单进行处理 menus.forEach((menu: Menu) => { menu.children.forEach((childMenu: Menu) => { childMenu.hide = !WebAppMenuService.checkMenuAuthOrNot(childMenu, allAuthMenus); }); }); return menus; }));}总结先完成，再完美。这里仅实现了菜单的隐藏，需要再编写权限控制逻辑，使我们的系统更安全，但那是我们以后要考虑的事情。现在先加个TODO。先把客户想要的功能先实现了，至于你实现得如何，代码如何，客户统统不关心，我们在先满足客户对开发速度需求的前提下，以后再抽出时间将程序的某些功能完美。 ...