摘要：后面就是和定位彈出框一樣類似的操作，在導航菜單里面我并沒有這么做，后面會改成這樣的吧。一些多層嵌套的位置問題，尚未完成。在顯示的時候會有高度抖動的問題。里面給某些子組件添加樣式用到了深度作用。

效果盡量仿著element做。
預覽地址

 
        
          
          for Mac
           for Windows
             
        
          
            快速入門
            進階配置
            多語言支持
                         
        
 

如圖所示，關于(selected:被選中的那個item),在menu里面控制，通過watchChild“監聽每個item”,一旦menu-item被點擊便會觸發

this.$emit("menuItemUpdate",this.name)

這里menu便會通過menu-item的$emit和$on實現數據的傳遞

watchChild(){
                this.items.forEach(vm=>{
                    vm.$on("menuItemUpdate",name=>{
                        this.$emit("update:selected",[name])
                    })
                })
            },

這里的this.items就是收集的每一個menu-item,這在一開始就已經完成了。
要用到依賴注入,這里面子組件menu-item都直接操作menu的data，耦合度非常高。

//menu
 provide(){
          return {
              root:this
          }
        }

//menu-item
 inject:["root"],
        created(){
           this.root.addItem(this)
          //.........
        },

然后告訴menu-item你可以被選中了。updated鉤子函數用作完成這個任務再適合不過了

 updated(){
           this.updateChild()
        },
 methods:{
     updateChild(){
              this.items.forEach(vm=>{
                  if(this.selected.indexOf(vm.name)>-1){
                      vm.selected = true
                  }else{
                      vm.selected = false
                  }
              })
          }
 }        

當menu-item被選中時，觸發tellParents函數，收集這條路徑上所有父元素的name,把這個收集好的數據放到selectedArr里面。這個還可以用來高亮路徑上的父元素。
在click的時候觸發onClick函數

onClick(){
                //...........
                let subFather = this.$parent.$el.classList.contains("x-sub-menu") this.$parent.$el.classList.contains("x-sub-menu")
                let groupFather = this.$parent.$el.classList.contains("x-menu-item-group")
               //..........
                if(subFather||groupFather){
                 //.......
                    this.tellParents(this)
                   //.......
                }else{
                    //.......
                }

            },

tellParents遞歸調用自身來收集 name

 tellParents(that){
                if(that.$parent.$parent.$options.name==="x-sub-menu" ||that.$parent.$parent.$options.name==="x-menu-item-group"){
                    this.root.selectedArr.unshift(that.$parent.name)
                    this.tellParents(that.$parent)
                }else{
                    this.root.selectedArr.unshift(that.$parent.name)
                    console.log(this.root.selectedArr)
                }
            },

最后就是我希望在menu-item被選中后，可以關閉路徑的所有彈出框popover。
這同樣需要一個遞歸遍歷

childClosePopover(){
                if(this.$parent.$options.name==="x-sub-menu"){
                    this.open = false
                    this.$parent.childClosePopover()
                }
            },

參照了一下Menu Attribute。
這里的文字顏色和圖標顏色是同步的，
hover的css效果和active的一樣

text-color文字顏色 。

active-color被選中顏色。

back-ground-color正常背景色 。

active-back-ground-color被選中的背景色 。

如圖所示的紫色的路線，通過遞歸遍歷通知menu樹里面的每一個分支，改變顏色，是否垂直，disabled等等。
大部分添加的功能都在這條線上實現通信。

watch:{
            selected(){
                if(this.selected&&........{
                    this.$refs.item.style.backgroundColor = ........
                    this.$refs.item.style.color = .........
                    //...........
                }else{
                  //............
                }
            }
        }

element對彈出框的操作是以在body上添加子節點的方式。這樣子最直接的就是避免了可能存在overflow:hideen的問題。
后面的定位只需要用js來完成就行了，還要考慮到scroll的問題。

最麻煩的地方在于動畫過渡上，單純的用css會有彈出框回到原點的問題。
這里就需要用到
javascript鉤子。
官網在這上面的說的很明確，但是實現過程中也踩了一些坑

動畫瞬間完成的問題，這在官網上的解釋時只用JavaScript做過渡的時候(沒用css)的情況下動畫會瞬間完成，要使用done。之后試了并沒有用。這里并不是只用JavaScript做過渡的。之后想了一下，既然beforeEnter和enter瞬間就執行了，并沒有動畫的事件間隔，為什么不自己加一個 settimeout呢，問題就解決了，可能這種解決方法并不是很好。這里不用$nextTick的原因

  enter(el) {
    setTimeout(()=>{
      //.....
      })
    },

鉤子中設置的一些額外的css屬性要在afterEnter改回來啊，其中就例如overflow:hidden和height，導致在vertical垂直面板上彈出框不會撐開父元素的問題。

 afterLeave(el){
              el.style.overflow = ""
              if(this.vertical){
                  el.style.height=""
              }
          },

后面就是和定位彈出框一樣類似的js操作，在menu導航菜單里面我并沒有這么做，后面會改成這樣的吧。

 beforeEnter(el) {
                el.style.position= "absolute"
                el.style.transform=.......
                //.........
          },
  
   enter(el) {
             //......
          },

hover觸發和click觸發

彈出框移出消失的時間控制和動畫抖動。

高亮線條只在一級子組件中存在

menu-item-group組件的添加，其實只是作為一個中轉站而已，無非是拷貝一些函數。

一些多層嵌套的位置問題，尚未完成。

橫版里面active下面的亮條顯示,一開始就是設置menu-item里面的border-bottom，因為同時設置了transition。在顯示的時候會有高度抖動的問題。后來改用偽類完成，不過在自定義顏色的時候非常麻煩。這個方法也放棄了。最后只有在下面加一個div代替border-bottom作為高亮線條，方法雖然很蠢，但是有效。

scoped里面給某些子組件添加css樣式用到了 /deep/深度作用。

其實以這種顯而易見的數據流作為基礎，多增加一些功能無非是函數的添加和css的修改。找bug和維護也是相對比較輕松的。最后您如果覺得還不錯的話，給我的項目一個star想必也是極好的。