vue PC端菜单优化（第一个菜单隐藏的时候，整个菜单都不显示）

首先先看别人处理的PC端bug

后台管理系统模板问题

由于后台管理系统增加了菜单权限，路由是根据菜单权限动态生成的，当只有一个菜单的权限时，会导致这个菜单可能不显示，参看模板的源码：

  <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)"><el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}"><svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon><span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span></el-menu-item></router-link><el-submenu v-else :index="item.name||item.path"><template slot="title"><svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon><span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span></template><template v-for="child in item.children" v-if="!child.hidden"><sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item><router-link v-else :to="resolvePath(child.path)" :key="child.name"><el-menu-item :index="resolvePath(child.path)"><svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon><span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span></el-menu-item></router-link></template></el-submenu>

其中v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow"表示当这个节点只有一个子元素，且这个节点的第一个子元素没有子元素时，显示一个特殊的菜单样式。而问题是item.children[0]可能是一个隐藏的菜单（item.hidden === true）,所以当这个表达式成立时，可能会渲染一个隐藏的菜单。参看最新的后台源码，作者已经修复了这个问题。

<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"><app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"><el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"><item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /></el-menu-item></app-link>
</template>

 methods: {hasOneShowingChild(children = [], parent) {const showingChildren = children.filter(item => {if (item.hidden) {return false} else {// Temp set(will be used if only has one showing child)this.onlyOneChild = itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length === 1) {return true}// Show parent if there are no child router to displayif (showingChildren.length === 0) {this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }return true}return false}}

以上已处理当没有子菜单的情况下的问题，但是存在另外的一个问题（bug），如果子菜单中第一个菜单设置为隐藏，其他子菜单设置为显示，则存该主菜单都不显示了。

具体优化如下：

<div v-if="!item.hidden&&item.children&&checkMenu(item)" class="menu-wrapper">

修改成：

<div v-if="!item.hidden&&item.children&&checkMenu(item)&&checkItmes(item)"

  checkItmes(item){var that = thisvar items = item.childrenfor(var i=0;i<items.length;i++){if(items[i]&&items[i].hidden==false){return true}}return false},

已经基本已修复问题，但是又出现新的问题，一级菜单的时候，没有子菜单，会自动渲染成自己为自己的子菜单，继续优化：

 <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">

修改成：

 <template v-if="checkItmesnest(item)&&hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">

    checkItmesnest(item){var that = thisvar items = item.childrenfor(var i=0;i<items.length;i++){if( items.length==1&&items[i]&&items[i].hidden==false){return true}}return false},

以上的逻辑就是，只要没有子菜单的时候才使用它进渲染。

vue PC端菜单优化（第一个菜单隐藏的时候，整个菜单都不显示）相关推荐

【AI PC端算法优化】一，一步步优化RGB转灰度图算法
欢迎关注AI PC端算法优化代码库:https://github.com/BBuf/Image-processing-algorithm-Speed . 0. 资源获取公众号输入高性能计算关键词 ...
【AI PC端算法优化】二，一步步优化自然饱和度算法
上一节的RGB转灰度图算法我又做了两个相关优化,加入了多线程以及去掉了上次SSE计算中的一些重复计算,现在相对于传统实现已经可以获得4倍加速.同时我也在做一个AVX2的优化,所以不久后我将发布一个RG ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...
Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
VUE PC端可拖动悬浮按钮改进
VUE PC端可拖动悬浮按钮改进之前发过一篇悬浮球的,但是那个不太好用,鼠标移动过快会脱标,就很难受,最近又改了一下,这是加了个监听,拖动结束的时候改变top和left,应该还能改进,欢迎大佬们提出 ...
移动端、PC端网站优化需齐头并进
如今移动互联网发展速度之快我们深有体会,网站优化也从PC端延伸到移动端,在短短的几年时间内,移动SEO优化的作用让人无法忽视. 在移动互联网普及的大趋势下,中小企业在接触移动互联网的速度上还是太慢,不 ...
vue pc端web页面微信支付和支付宝支付
业务场景介绍: pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ] 订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成 ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
VUE pc端适配移动端H5
需要安装两个插件 postcss-pxtorem 和 lib-flexible 直接安装postcss-pxtorem插件,报错" Error: PostCSS plugin postcss ...

vue PC端菜单优化（第一个菜单隐藏的时候，整个菜单都不显示）

vue PC端菜单优化（第一个菜单隐藏的时候，整个菜单都不显示）相关推荐

最新文章

热门文章