element中Tree結構右鍵實現自定義的菜單(一)

　　　整理最近開發過程遇到的坑，還有一些自己想要記錄分享的。大概包括Tree結構：右鍵菜單，節點的增刪改和移動，還有記錄一個多層數據嵌套數據，結構不渲染的問題；表格結構：表格的上下移動，修改，還有一些小知識點。本章主要記錄tree節點 右鍵菜單的功能。

一、實現tree結構的右鍵

　　element中提供了現成的api，node-contextmenu.而且提供了四個參數。可以通過右鍵拿到data，node節點，event（判斷位置），還有節點。

 

　　上代碼

  @node-contextmenu="rightClick"
  rightClick(){

　　　this.nodedata = object;//存當前數據

     this.Node = Node;//存當前節點信息

     this.menu=true//讓菜單顯示

   document.removeEventListener("click", this.Listen);//添加監聽，監聽鼠標事件
  }

　　

 

二、右鍵菜單的實現

　　第一種，你可以自己定義div，設計樣式，規定大小。需要提醒的是，你需要設置自定義屬性，原因是，判斷你點擊的菜單功能是什么。

　　第二種，利用element中的NavMenu組件，這樣可以省去一些樣式的設置，menu中index屬性，也是作為判斷菜單功能的依據，而且提供現成的api

　　

  　　　　　　　　 <div v-show="menu">
                  <el-menu
                    id="menu" 
                    @select="handleSelect"
                    text-color="#000"
                  >
                    <el-menu-item index="1" class="menuItem">
                      <span slot="title">新建</span>
                    </el-menu-item>
                    <el-menu-item index="2" class="menuItem">
                      <span slot="title">修改</span>
                    </el-menu-item>
                    <el-menu-item index="3" class="menuItem">
                      <span slot="title">刪除</span>
                    </el-menu-item>
                  </el-menu>
                </div>

　　通過select事件，可以拿到你點擊的菜單功能，進行相應的操作就ok了

 handleSelect(key) {
     if（key==1）{
      console.log('這是新建功能');
    }else if（key==2）{
        console.log('這是修改功能');
    }
}        

　　對了 還有一個重要的點，就是對鼠標的監聽事件，開始寫的時候，因為沒有寫這個監聽，老是踩坑，后來參考了網上大佬的的寫法解決了。

　　需要監聽你鼠標的事件，如果你點擊別的地方，及時將菜單關閉

Listen() {
      this.menu = false;
      document.removeEventListener("click", this.Listen); 
},

　　后記：下一篇具體寫菜單操作，包括新建，修改，刪除，上移，下移。