iview導航菜單updateOpened和updateActiveName的使用

先看官方文檔:  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例子有空的時候再放上來 : )

相關文章
相關標籤/搜索