RXEdior預設會有檔案管理功能，但是靈活性需求不大，目前的設想是檔案夾不允許修改，只允許增刪改檔案，基于這樣的設想，把界面實作成這個效果：
這個功能并不是一個通用功能，并且我們做的代碼，也沒有按照類別庫的標準要求，這種編輯功能實作有些復雜，用了大量的js事件，代碼不是很容易讀，后期這個功能可能會有大的變化，所以我也沒有讓這些代碼變的更優雅的動力，
本篇作文就不詳細展示代碼，大致說說我的實作思路，以及撰寫程序中踩到的坑，需要原始碼的朋友，可以直接從Github下載，
1、這個專案中，兩個樹用的是同一套代碼，添加editable屬性props加以區分，
<NodeTree v-model="files" :openIcon="'fas fa-folder-open'" :closeIcon="'fas fa-folder'" :editable = 'true' > </NodeTree>
2、給節點資料添加三個變數，功能見注釋：
isFolder:true,//不能被編輯，只有該屬性為True時可以新建子節點 leafIcon:'far fa-file-code',//子節點圖示，構建新節點時使用 locked:true,//顏色變淡，不能被選中
3、彈出右鍵選單，在DIV上監聽事件contextmenu：
@contextmenu.prevent = 'onContextMenu'
注意一定要加.prevent，要不然不起作用，沒有深究為什么，
4、出現幾次怪異現象，比如：
<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標簽
5、捕捉全域的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
若有有問題，請留言交流，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/144325.html
標籤：JavaScript
上一篇：Mongodb 插入資料的方式