先看官方文档: iview导航菜单 iview
这里主要遇到的问题有两个:ui
1. 点击回到首页(B按钮)时须要取消选中当前选中的菜单项(所有不选中),这里用到的是 updateActiveName方法this
2. 点击收起菜单(A按钮)时,关闭全部展开的子菜单(只展现一级菜单),这里要用到的是 updateOpened方法spa
截图以下:code
先看下这两个方法的文档说明,直接看不是很清楚究竟是怎么调用的,不断的尝试,其实并不难的哦component
来看下最终的调用方法:blog
方法写在methods里面,在点击的按钮标签绑定该事件便可。事件
/** * 手动更新选中的菜单 */ menuChange(){ this.menuActive = ""; this.$nextTick(()=>{ this.$refs.menus.updateActiveName(); }) }
注意上面的代码顺序哦!!!文档
1. this.menuActive = ""; 写在$nextTick前面!!!get
2. this.$refs.menus.updateActiveName(); 要写在$nextTick里面!!!
刚开始我把 this.menuActive = ""; 和 updateActiveName方法都写在了$nextTick里面,致使只有在刷新页面,并只点了一次菜单的状况下,点击跳转首页的时候才会取消选中菜单,而后再怎么点击都没有效果了。。
一样的,updateOpened方法也是这样的写法哦!
具体的menu例子有空的时候再放上来 : )