RXEdior默认会有文件管理功能，但灵活性要求不大。目前的思路是文件夹不允许修改，只允许增删改查。文档。基于这个思路，接口实现成这样：这个函数不是一般的函数，我们做的代码没有按照类库的标准要求。这个编辑功能的实现有点复杂，使用了很多js事件，代码可读性不是很好。这个功能以后可能会变很多，所以我没有动力让这些代码更优雅。这篇作文就不详细展示代码了，只是粗略的说说我的实现思路和我在写的过程中踩过的坑。需要源码的朋友可以直接从Github上下载。1.本项目中两棵树使用同一套代码，增加了可编辑属性props来区分。2。添加节点数据三个变量，作用见注释：isFolder:true,//不可编辑，只有当该属性为True时，才能创建新的子节点leafIcon:'farfa-file-code',//child节点图标，新建节点时使用locked:true,//颜色变淡无法选中3.弹出右键菜单，监听DIV上的事件contextmenu:@contextmenu.prevent='onContextMenu'注意一定要加上.prevent，不然不行，具体原因我也没探究过。4.有几个奇怪的现象，比如："autofocus="autofocus"/>{{inputValue.title}}如果将代码中的模板替换为span或div，则无法弹出右键菜单。对了，如果想在VUE中输出纯文本，不加DIV或SPAN标签，可以使用模板标签5捕获全局点击和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如有问题欢迎留言交流。
