不定深度的导航栏制作
1.需求
制作多级导航，而导航深度不确定，制作一款工具，只需要提供导航的数据就可以让其进行完美适用。当然这个数据得靠人进行加工，满足使用条件，不要被这里吓住，很简单的。
2.本文导航
本篇主要介绍两种情况下不定深度的导航的制作及其处理思路。
第一种：右键指定位置弹出第一级导航，往后的导航通过鼠标移动自动进行显示与隐藏。
----------- 往后的导航还有一个特征就是鼠标在 ‘爷字辈‘ 的导航上时，‘孙字辈’ 的导航要隐藏
第二种：完全通过鼠标左边进行导航的展示与隐藏，切满足第一种的 ‘爷字辈’ 和 ‘孙字辈’ 的处理关系
下面进行介绍。
3.递归组件
在正式开始前，先谈一个话题，不定导航，标签项不确定，那么这里除了通过js去制作外，如果使用标签来进行制作，那么就只能使用递归来进行制作（目前本人知道的）。由于常用的是vue，这里就使用vue进行介绍。
注意是自己调用自己，所以1和2处的文字是一样的。
说是一样的其实不是，熟悉一点的可能知道怎么回事，我就举两个例子说明：
name:“MyCompoents” -----> 标签：my-compoents
name:“Test” -------> 标签： test
注意别用关键字
4.第一种：右键结合mouse事件
不知道有没有人被第一条的要对数据进行处理吓到，我列一个我做的数据例子：
list: [
{
name: "a1",
childrenShow:false,
children: [
{
name: "a11",
father:"a1",
childrenShow:false,
children: [
{
name: "a111",
father:"a11",
},
{
name: "a112",
father:"a11",
}
]
},{
name: "a12",
father:"a1",
childrenShow:false,
children: [
{
name: "a121",
father:"a12",
},
{
name: "a122",
father:"a12",
}
]
}
]
},
{
name: "a2",
childrenShow:false,
children: [
{
name: "a21",
father:"a2",
childrenShow:false,
children: [
{
name: "a211",
father:"a21",
childrenShow:false,
children: [
{
name: "a2111",
father:"a211",
},
{
name: "a2112",
father:"a211",
},
{
name: "a2113",
father:"a211",
childrenShow:false,
children: [
{
name: "a21131",
father:"a2113",
childrenShow:false,
children: [
{
name: "a211311",
father:"a21131",
},
]
},
]
}
]
},
{
name: "a212",
father:"a22",
}
]
},{
name: "a22",
father:"a2",
childrenShow:false,
children: [
{
name: "a221",
father:"a21",
},
{
name: "a222",
father:"a22",
}
]
}
]
},
{
name: "a3",
childrenShow:false,
children: [
{
name: "a31",
father:"3",
childrenShow:false,
children: [
{
name: "a311",
father:"a31",
},
{
name: "a312",
father:"a32",
}
]
},{
name: "a32",
father:"a3",
childrenShow:false,
children: [
{
name: "a321",
father:"a31",
},
{
name: "a322",
father:"a32",
}
]
}
]
}
],
看黑字灰底难受那看看下面这个
是不是很简单，如果有“儿子列表”就加一个childrenShow:false，和对应的children数组，根据需要进行命名。
数据处理好了，下面开始制作：
上面加了一个点击屏幕其他地方，让导航框隐藏的方法以及右键的时候确定导航框的显示位置的方法。
重要的来了：
解决思路：
鼠标进入，让自己的儿子显示，让同梯度的兄弟的儿子不显示，同时，如果当前对象有‘孙字辈’，还要让其‘孙字辈’的隐藏。
图片中的 this.item = item 是不必要的
鼠标移出：如果该导航没有父亲，就隐藏
结果：
5.第二种：通过右键和点击触发
解决思路：和第一种相比，点击下一种的事件就是mouseleave事件，所以这里只需要将上面的mouseover事件复制下来作为点击事件就OK了。
下面直接上代码：
结果：
6.总结
上面两种方法最后都能实现，根据场景进行选用。
同时，我分享一下我在做这个东西的过程中遇到的问题：
1.我使用一个vue文件想搞完整个功能。
这个其实是不能实现的（我目前的理解），因为组件调用自己，子组件通过props接收自己要显示的数据，如果把数据写在一个组件里面，实现也是在这个组件里面，就会造成死循环，组件一直调用自己（他要展示的是children，但其实他展示的一直都是最外层），且最外层数据都有children，就会造成内存溢出。
2.不能使用mouseenter只能使用mouseover
从标签结构知道从 ‘子字辈’ 到 直接‘父字辈’ 的时候是不会触发mouseenter事件的
mousemove应该也可以
3.传数据问题
最开始我的想法是把 “父亲” 传来的数据进行深拷贝，不改变父亲的数据（最开始就是这么简简单单的想法），但是后面才发现当鼠标在 “爷字辈” 上要控制 “孙字辈” 隐藏，怎么搞？最开始是不想改变“父亲”的数据，结果现在要控制“孙子”的数据的展示，所以最后我没有对“父亲”的数据进行深拷贝，让“子子孙孙”对整个list数据都可以进行修改，由于当前组件接收的数据有自己的也有其后面的直系“子孙”数据，就可以对这些数据进行更改，进而起到改变“孙子”数据的展示问题。
4.扩展
最开始我想这个问题的解决想了好久，而且最开始我百度也是没有找到解决办法，可能是我搜索的主题不对。而且在通过本次我首次接触标签递归的思想和做法。
在对于怎么做出该有的效果的时候，我想想想想了好久，始终不知道怎么去判断什么时候会有哪些变化。直到后面反应过来你只需要控制本层的数据和“孙字辈”的数据的展示就OK了。
5.最后
不要一直想，面向百度编程，或者和同事交流都能让你有所收获。
首次发，自己也是一个一年工作经验不到的新手，如果有什么错误的见解请各位看官指正。