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如有有问题，请留言交流。