导航菜单 父级高亮 处理

javascript 复制代码
    // 预处理导航数据
    filterMenuFun (arr, uuids = []) {
      // uuids 用来有级嵌套导航时,子集acitve时父级也有acitve样式
      arr.forEach(item => {
        item.uuids = [item.uuid, ...uuids];
        item.children && this.filterMenuFun(item.children, item.uuids)
      });
      return arr;
    },

让我们逐行解析这个函数:

  1. filterMenuFun (arr, uuids = []) {

    • 定义一个名为filterMenuFun的函数,它接受两个参数:arr(一个数组)和uuids(一个默认为空数组的UUIDs列表)。
  2. arr.forEach(item => {

    • 使用forEach方法遍历arr数组中的每一个item
  3. item.uuids = [item.uuid, ...uuids];

    • itemuuids属性设置为一个数组,其中第一个元素是itemuuid,然后是将uuids数组中的所有元素展开。这实际上是将itemuuid添加到uuids列表的开头。
  4. item.children && this.filterMenuFun(item.children, item.uuids)

    • 检查item是否有children属性。如果有,则递归地调用filterMenuFun函数,处理item.children数组,并将item.uuids作为第二个参数传递。这意味着子级菜单将继承其父级菜单的uuids列表。
  5. });

    • 结束forEach循环。
  6. return arr;

    • 返回处理后的arr数组。
  7. },

    • 结束函数定义。

使用场景:

这个函数可能用于处理一个嵌套的导航菜单数据结构。例如,在一个多级导航菜单中,你可能想要当用户选择某个子菜单项时,不仅使该子菜单项处于活动状态,还使其父级菜单也处于活动状态。通过为每个菜单项添加一个uuids属性,你可以轻松地确定哪些菜单项应该被标记为活动状态。

示例:

假设你有以下数据结构:

复制代码
复制代码
javascript`const navData = [
{
uuid: '1',
name: '菜单1',
children: [
{
uuid: '1-1',
name: '子菜单1-1',
},
{
uuid: '1-2',
name: '子菜单1-2',
children: [
{
uuid: '1-2-1',
name: '子子菜单1-2-1',
}
]
}
]
},
{
uuid: '2',
name: '菜单2',
}
];`

调用filterMenuFun(navData, ['1-2-1'])后,navData将变为:

复制代码
复制代码
javascript`[
{
uuid: '1',
name: '菜单1',
uuids: ['1', '1-2', '1-2-1'],
children: [
{
uuid: '1-1',
name: '子菜单1-1',
uuids: ['1-1'],
},
{
uuid: '1-2',
name: '子菜单1-2',
uuids: ['1-2', '1-2-1'],
children: [
{
uuid: '1-2-1',
name: '子子菜单1-2-1',
uuids: ['1-2-1'],
}
]
}
]
},
{
uuid: '2',
name: '菜单2',
uuids: ['2'],
}
];`

现在,你可以很容易地检查哪个菜单项(或它的任何父级菜单项)的uuids列表包含某个特定的UUID,从而确定哪些菜单项应该被标记为活动状态。

效果: 父子同时高亮

相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
前端康师傅15 小时前
JavaScript 作用域
前端·javascript
云枫晖15 小时前
JS核心知识-事件循环
前端·javascript
eason_fan16 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript