vue組件之menu導航菜單

menu導航菜單組件預覽地址

組件之間的通訊

<x-menu :selected.sync="selected" >
        <x-sub-menu name="extension">
          <template slot="title">擴展</template>
          <x-menu-item name="mac">for Mac</x-menu-item>
           <x-menu-item name="windows">for Windows</x-menu-item>
             </x-sub-menu>
        <x-sub-menu name="learn">
          <template slot="title">如何使用</template>
            <x-menu-item name="fast">快速入門</x-menu-item>
            <x-menu-item name="advanced">進階配置</x-menu-item>
            <x-menu-item name="package">多語言支持</x-menu-item>
                         
        
 </x-menu>
複製代碼

selected的傳遞

如圖所示，關於(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等等。 大部分添加的功能都在這條線上實現通訊。

js控制顏色的更改

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

彈出框的問題

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

補充下代碼:

const {trigger} = this.$refs
                document.body.appendChild(trigger)
複製代碼

獲取 let {top,left,height,width} = '目標元素的位置'.getBoundingClientRect() 考慮到window的scrollY和scrollX對彈出框定位計算的影響

let position = {
                    '某個位置':{
                        top:top + window.scrollY,
                        left:left + window.scrollX,
                      //.......
                    },
                }
複製代碼

定位

trigger.style.left = position['某個位置'].left + 'px'
  trigger.style.top = position['某個位置'].top + 'px'
複製代碼

代碼粗略了一點，差很少是這個意思，雖然還有其餘須要考慮的地方。大致就是這樣了吧。

最麻煩的地方在於動畫過渡上，單純的用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組件的添加，其實只是做爲一箇中轉站而已，無非是拷貝一些函數。
• 一些多層嵌套的位置問題，還沒有完成。

遇到的一些css問題

• 橫版裏面active下面的亮條顯示,一開始就是設置menu-item裏面的border-bottom，由於同時設置了transition。在顯示的時候會有高度抖動的問題。後來改用僞類完成，不過在自定義顏色的時候很是麻煩。這個方法也放棄了。最後只有在下面加一個div代替border-bottom做爲高亮線條，方法雖然很蠢，可是有效。
• scoped裏面給某些子組件添加css樣式用到了 /deep/深度做用。

簡單的總結？

其實以這種顯而易見的數據流做爲基礎，多增長一些功能無非是函數的添加和css的修改。找bug和維護也是相對比較輕鬆的。最後您若是以爲還不錯的話，給個人項目一個star想必也是極好的。