NavMenu菜单栏自定义处理

Question

有什么办法可以做到这种？ element-ui组件的NavMenu 菜单导航

3级菜单 鼠标移入后就触发4级 ，水平展开

现在官方的是mode模式（horizontal / vertical） 要么全部水平展开，要么全部往下展开

现在这个open事件是可以拿到对应的层数的

Answer 1

如果需要实现自定义的NavMenu菜单栏处理，可以考虑使用element-ui的自定义模板（template）功能。

1. 使用NavMenu组件，并设置mode为vertical（垂直展开）模式。

2. 自定义菜单项的模板，可以使用slot-scope插槽来访问菜单项的数据和方法。在菜单项的模板中，可以添加任意的HTML和CSS代码来实现自定义的样式和交互效果。

3. 在菜单项的模板中，添加鼠标移入事件的处理函数。当鼠标移入菜单项时，可以通过该函数来动态添加子菜单项，并将菜单项的展开方式设置为水平展开。可以使用element-ui提供的$refs属性来访问菜单项的实例，从而进行动态添加子菜单项等操作。

4. 在适当的时候，清除已添加的子菜单项并将菜单项的展开方式恢复为垂直展开。可以在鼠标移出事件的处理函数中实现这些操作。

如果不熟悉element-ui组件的使用和自定义模板的编写，建议参考element-ui的官方文档和示例。