首页IT科技点击系统导航(NavMenu导航菜单el-submenu点击事件及激活状态变化)

点击系统导航(NavMenu导航菜单el-submenu点击事件及激活状态变化)

时间2025-04-29 14:17:55分类IT科技浏览5540
导读:记录多级菜单时,NavMenu导航菜单的一级菜单点击事件以及当前激活状态变化...

记录多级菜单时             ,NavMenu导航菜单的一级菜单点击事件以及当前激活状态变化

原因:

由于项目的需求变化                    ,原本是点击二级子菜单才发生跳转       ,点击子菜单后             ,el-menu组件也会执行@select的方法                   ,导航栏的菜单也会对应变成激活状态             。但是       ,需求变成点击一级菜单也可以发生跳转       ,默认跳转到第一个子菜单的界面                   ,el-menu没有实现可以点击el-submenu这一功能                    。

解决方案:

1.在el-submenu标签添加点击事件             ,@click.native       ,然后再从点击事件内实现跳转等事务                    ,因为我的功能是默认跳转到第一个子菜单             ,故复用了@select的方法

注意:单纯使用@click没有效果

2.当前激活状态的改变,el-menu组件的:default-active属性等于当前的激活状态的菜单绑定的:index

所以                    ,可以在data增加一个变量activeIndex,用来记录当前激活状态的菜单的:index的值                    , 然后el-menu组件的:default-active由变量activeIndex来控制       。

每次点击菜单时,在@select的点击事件(因为我复用了这个方法)最后给变量activeIndex赋值当前的菜单的:index 即可             。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
ai智能原创文章有哪些(揭秘人工智能文章创作助手助力软文撰写的妙用) 宝清58同城招聘信息(宝清今天招聘信息)