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

效果盡量仿著element做。
預(yù)覽地址

 
        
          
          for Mac
           for Windows
             
        
          
            快速入門
            進(jìn)階配置
            多語(yǔ)言支持
                         
        
 

如圖所示，關(guān)于(selected:被選中的那個(gè)item),在menu里面控制，通過(guò)watchChild“監(jiān)聽(tīng)每個(gè)item”,一旦menu-item被點(diǎn)擊便會(huì)觸發(fā)

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

這里menu便會(huì)通過(guò)menu-item的$emit和$on實(shí)現(xiàn)數(shù)據(jù)的傳遞

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

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

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

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

然后告訴menu-item你可以被選中了。updated鉤子函數(shù)用作完成這個(gè)任務(wù)再適合不過(guò)了

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

當(dāng)menu-item被選中時(shí)，觸發(fā)tellParents函數(shù)，收集這條路徑上所有父元素的name,把這個(gè)收集好的數(shù)據(jù)放到selectedArr里面。這個(gè)還可以用來(lái)高亮路徑上的父元素。
在click的時(shí)候觸發(fā)onClick函數(shù)

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遞歸調(diào)用自身來(lái)收集 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被選中后，可以關(guān)閉路徑的所有彈出框popover。
這同樣需要一個(gè)遞歸遍歷

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

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

text-color文字顏色 。

active-color被選中顏色。

back-ground-color正常背景色 。

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

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

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

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

最麻煩的地方在于動(dòng)畫(huà)過(guò)渡上，單純的用css會(huì)有彈出框回到原點(diǎn)的問(wèn)題。
這里就需要用到
javascript鉤子。
官網(wǎng)在這上面的說(shuō)的很明確，但是實(shí)現(xiàn)過(guò)程中也踩了一些坑

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

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

鉤子中設(shè)置的一些額外的css屬性要在afterEnter改回來(lái)啊，其中就例如overflow:hidden和height，導(dǎo)致在vertical垂直面板上彈出框不會(huì)撐開(kāi)父元素的問(wèn)題。

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

后面就是和定位彈出框一樣類似的js操作，在menu導(dǎo)航菜單里面我并沒(méi)有這么做，后面會(huì)改成這樣的吧。

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

hover觸發(fā)和click觸發(fā)

彈出框移出消失的時(shí)間控制和動(dòng)畫(huà)抖動(dòng)。

高亮線條只在一級(jí)子組件中存在

menu-item-group組件的添加，其實(shí)只是作為一個(gè)中轉(zhuǎn)站而已，無(wú)非是拷貝一些函數(shù)。

一些多層嵌套的位置問(wèn)題，尚未完成。

橫版里面active下面的亮條顯示,一開(kāi)始就是設(shè)置menu-item里面的border-bottom，因?yàn)橥瑫r(shí)設(shè)置了transition。在顯示的時(shí)候會(huì)有高度抖動(dòng)的問(wèn)題。后來(lái)改用偽類完成，不過(guò)在自定義顏色的時(shí)候非常麻煩。這個(gè)方法也放棄了。最后只有在下面加一個(gè)div代替border-bottom作為高亮線條，方法雖然很蠢，但是有效。

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

其實(shí)以這種顯而易見(jiàn)的數(shù)據(jù)流作為基礎(chǔ)，多增加一些功能無(wú)非是函數(shù)的添加和css的修改。找bug和維護(hù)也是相對(duì)比較輕松的。最后您如果覺(jué)得還不錯(cuò)的話，給我的項(xiàng)目一個(gè)star想必也是極好的。