RXEdior預(yù)設(shè)會(huì)有文件管理功能，但是靈活性需求不大，目前的設(shè)想是文件夾不允許修改，只允許增刪改文件?；谶@樣的設(shè)想，把界面實(shí)現(xiàn)成這個(gè)效果：

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

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

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

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

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

leafIcon:'far fa-file-code',//子節(jié)點(diǎn)圖標(biāo)，構(gòu)建新節(jié)點(diǎn)時(shí)使用

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

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

@contextmenu.prevent = 'onContextMenu'

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

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

{{inputValue.title}}

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

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

mounted () {

document.addEventListener('click', this.clearEditingThings)

document.addEventListener('contextmenu', this.hideContextMenu)

},

beforeDestroyed() {

document.removeEventListener('click', this.clearEditingThings)

document.removeEventListener('contextmenu', this.hideContextMenu)

},

需要只保留一個(gè)菜單，排他性關(guān)閉其他的，所以需要判斷菜單是否時(shí)需要被關(guān)閉的：

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

},

用的是VUE的ref，如果右鍵點(diǎn)擊的節(jié)點(diǎn)跟當(dāng)前節(jié)點(diǎn)一致，則顯示右鍵菜單，反之關(guān)閉。

總結(jié)

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

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