NavMenu 置顶

NavMenu 置顶,第1张

解绑作为一个悲催的前端实习仔,今天又是卡住的一天。

需求:将左侧菜单项实现点击置顶 *** 作(左侧菜单项有对象数组遍历得出,实质就是将选中的对象提升到数组的第一位)

公司项目使用了element中的NavMenu组件来实现,提升实现很简单,但是提升之后激活状态一直出现问题,卡了大半天。最后还是请教涛哥得到解决。。。。代码不全,仅用于自己个人记录

          //点击小图标将当前菜单提示至顶部
            toArrayTop(flag, length) {
                if (length === 0) {  //二级菜单是否存在的判断用于传递以及菜单的值
                    this.active = flag.toString()
                }
                this.isUpdate = false;  //赋值为假在为真触发页面刷新,避免样式跳动
                let topItem = {}
                this.leftMenu.forEach((item, index)=> {
                    if (item.index == flag){
                        topItem = item;
                        this.leftMenu.splice(index, 1);
                        return;
                    }
                })
                this.leftMenu.unshift(topItem);//对象提升
                this.topButton = '';
                //存储当前激活状态,保存当前菜单数组,刷新页面.
                localStorage.setItem('caption-type', flag);
                this.saveMenuList()
                this.$nextTick(() => {   //更新页面用于刷新数据
                    this.isUpdate = true
                })
            },

 我的问题主要出现在,二级选项的激活状态上,需要在选中的回调里自行设置激活状态,而后在提升时进行相关更改,类似下图情形: 

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/940567.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-17
下一篇2022-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存