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

這個功能并不是一個通用功能，并且我們做的代碼，也沒有按照類庫的標準要求，這種編輯功能實現(xiàn)有些復雜，用了大量的js事件，代碼不是很容易讀。后期這個功能可能會有大的變化，所以我也沒有讓這些代碼變的更優(yōu)雅的動力。

本篇作文就不詳細展示代碼，大致說說我的實現(xiàn)思路，以及編寫過程中踩到的坑。需要源碼的朋友，可以直接從Github下載。

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

2、給節(jié)點數(shù)據(jù)添加三個變量，功能見注釋：

isFolder:true,//不能被編輯，只有該屬性為True時可以新建子節(jié)點

leafIcon:'far fa-file-code',//子節(jié)點圖標，構建新節(jié)點時使用

locked:true,//顏色變淡，不能被選中

3、彈出右鍵菜單，在DIV上監(jiān)聽事件contextmenu：

@contextmenu.prevent = 'onContextMenu'

注意一定要加.prevent，要不然不起作用，沒有深究為什么。

4、出現(xiàn)幾次怪異現(xiàn)象，比如：

{{inputValue.title}}

把代碼中的template換成span或者div，就無法彈出右鍵菜單。順便說一下，VUE中如果想輸出純文字，不加DIV或者SPAN標簽，可以使用template標簽

5、捕捉全局的click 跟contextmenu事件，用于關閉已經(jīng)彈出的右鍵菜單

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，如果右鍵點擊的節(jié)點跟當前節(jié)點一致，則顯示右鍵菜單，反之關閉。

總結

以上是生活随笔為你收集整理的java 树 右键菜单_VUE实现Studio管理后台（八）：用右键菜单contextmenu，编辑树形结构...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。