VUE實現Studio管理後臺（八）：用右鍵菜單contextmenu，編輯樹形結構

RXEdior預設會有文件管理功能，可是靈活性需求不大，目前的設想是文件夾不容許修改，只容許增刪改文件。基於這樣的設想，把界面實現成這個效果：

這個功能並非一個通用功能，而且咱們作的代碼，也沒有按照類庫的標準要求，這種編輯功能實現有些複雜，用了大量的js事件，代碼不是很容易讀。後期這個功能可能會有大的變化，因此我也沒有讓這些代碼變的更優雅的動力。
本篇做文就不詳細展現代碼，大體說說個人實現思路，以及編寫過程當中踩到的坑。須要源碼的朋友，能夠直接從Github下載。

一、這個項目中，兩個樹用的是同一套代碼，添加editable屬性props加以區分。

<NodeTree v-model="files" 
:openIcon="'fas fa-folder-open'" 
:closeIcon="'fas fa-folder'"
:editable = 'true' >
</NodeTree>

 

二、給節點數據添加三個變量，功能見註釋：

isFolder:true,//不能被編輯，只有該屬性爲True時能夠新建子節點
leafIcon:'far fa-file-code',//子節點圖標，構建新節點時使用
locked:true,//顏色變淡，不能被選中

 

三、彈出右鍵菜單，在DIV上監聽事件contextmenu：

@contextmenu.prevent = 'onContextMenu'

注意必定要加.prevent，要否則不起做用，沒有深究爲何。

四、出現幾回怪異現象，好比：

<input v-if="inputValue.isEditing" 
  v-model="inputValue.title" 
  @blur="inputBlur" 
  @keyup.13 = "inputBlur"
  @click="inputClick"
  autofocus="autofocus"/>
<template v-else>{{inputValue.title}}</template>

把代碼中的template換成span或者div，就沒法彈出右鍵菜單。順便說一下，VUE中若是想輸出純文字，不加DIV或者SPAN標籤，能夠使用template標籤

五、捕捉全局的click 跟contextmenu事件，用於關閉已經彈出的右鍵菜單

mounted () {
  document.addEventListener('click', this.clearEditingThings)
  document.addEventListener('contextmenu', this.hideContextMenu)
},

beforeDestroyed() {
  document.removeEventListener('click', this.clearEditingThings)
  document.removeEventListener('contextmenu', this.hideContextMenu)
},

 

須要只保留一個菜單，排他性關閉其餘的，因此須要判斷菜單是否時須要被關閉的：

hideContextMenu(event){
  if(event.target !== this.$refs.nodTitle){
    this.contextMenuPoped = false
  }
},

用的是VUE的ref，若是右鍵點擊的節點跟當前節點一致，則顯示右鍵菜單，反之關閉。

感謝耐心閱讀，詳細代碼，請參考Github：https://github.com/vularsoft/studio-ui如有有問題，請留言交流。