NavMenu菜单栏自定义处理

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

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

现在官方的是mode模式(horizontal / vertical) 要么全部水平展开,要么全部往下展开

img

img

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

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

  1. 使用NavMenu组件,并设置mode为vertical(垂直展开)模式。

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

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

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

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

将菜单增加type类型,判断type类型===3是下级引用el-dropdown下拉选菜单