vue2+elTree 实现右键菜单

背景：通过树形控件筛选出子节点数据渲染列表，再操作列表。操作在繁琐，现在需要直接通过树进行操作：删除，编辑，详情等等。

首先创建一个树

<el-treeref="tree":data="data"node-key="id"@node-expand="treeOpen"@node-collapse="treeClose"@node-contextmenu="openTreeMenu"@node-click="handleNodeClick"
/>

查看 element 的官方文档 => elTree

node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-expand	节点被展开时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse	节点被关闭时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身

现在知道了，右键点击树的参数和事件。我们需要 data 中的 id，明确现在的需求

首先写好静态的菜单

// html
<div v-show="showTreeMenu" class="treeMenu"><div @click="treeJump">详情</div><div @click="treeEdit">编辑</div><div @click="treeMark">标记</div><div @click="treeDelete">删除</div>
</div>
// css
.treeMenu{position: fixed;z-index: 99999;top: 50%;left: 50%;background-color: white;overflow: hidden;border-radius: 5px;border: 1px solid #e6ebf5;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);div{padding: 3px 20px;box-sizing: border-box;//width: 50px;text-align: center;}div:hover{background-color: #eee;cursor: pointer;}
}

注：菜单默认不显示，最好不要嵌套太深，并且记得设置 z-index 避免被覆盖，其他样式根据自己需求都可以调整

添加右键事件，拿到需要的数据，触发显示菜单

openTreeMenu(event, data, node, target) {console.log(event, data, node, target)this.showTreeMenu = true // 显示菜单this.contextNode = data // 存储数据document.querySelector('.treeMenu').setAttribute('style',`top:${event.clientY}px;left:${event.clientX}px;`)document.addEventListener('click', this.closeTreeMenu)document.addEventListener('contextmenu', this.closeTreeMenu)
},

覆盖菜单样式后，添加了两个监听，用于关闭菜单。触发关闭后，及时移除监听事件

closeTreeMenu() {this.showTreeMenu = false // 关闭菜单document.removeEventListener('click', this.closeTreeMenu)document.removeEventListener('contextmenu', this.closeTreeMenu)
}

现在回到上面提到的另外三个方法，需要在他们三个的事件中，关闭右键菜单，否则我们的右键菜单打开后，操作节点树，是不会触发我们写的关闭监听的。

把菜单中的功能都加上，右键菜单完成。

如果有更好的方法和指正欢迎讨论。

vue2+elTree 实现右键菜单相关推荐

vue+element-UI实现右键菜单
转载请注明原文地址大体思路类似,具体实现在于控件是否提供了右键菜单的回调方法. 右键菜单的样式也可以根据自己需求进行变更. 新版本基于vue3 支持自动调整偏移量,防止菜单超出屏幕封装right ...
实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用
实例-Vue中使用右键菜单之@xunlei/vue-context-menu组件的使用 npm地址--https://www.npmjs.com/package/@xunlei/vue-context ...
JS简单实现自定义右键菜单
今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单.  <div id="menu ...
vue右键自定义菜单_一款小巧的开源右键菜单管理软件
要说右键管理软件,果核上面目前收集了几款,例如年久失修的右键管家. 虽然很多年没有更新了,但是软件的功能却正常,日常删除多余的右键菜单没问题. 另外,就是火绒家的右键管家,基本功能也够用不过嘛,今天 ...
安装ATi显卡驱动后增加的鼠标右键菜单的清理
一般最直接的方法是: 一般位于注册表的: 删除注册表HKEY_CLASSES_ROOT\Directory \Background\shellex\ContextMenuHandlers\ACE下 a ...
【Qt】菜单栏、工具栏、状态栏、右键菜单的实现
在QMainWidget基础上实现菜单栏.工具栏.状态栏.右键菜单. 头文件: #ifndef GWDEMO_H #define GWDEMO_H#include <QMainWindow> ...
mac系统添加VSCode到右键菜单（转）
转自:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014709690772 ...
Cygwin-添加到右键菜单脚本--一键安装、卸载
平时习惯用一些linux命令来完成工作,在Windows上有cygwin和gitbash两个选择.这两个我都装了. 相对来说cygwin支持的功能更多一些,但是它没有默认绑定到右键菜单.为此,我想到用 ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...

vue2+elTree 实现右键菜单

vue2+elTree 实现右键菜单相关推荐

最新文章

热门文章