<el-tree :highlight-current="highlight" :data="folderList" :props="defaultProps" @node-contextmenu="rightClick" @node-click="handleNodeClick"  style="min-width: 100%;display: inline-block;"></el-tree>
 
<div id="contextmenu"
           v-show="menuVisible"
           class="menu">
        <div class="contextmenu__item" @click="addDialogFolder"
             >添加</div>
        <div class="contextmenu__item"
             >删除</div>
         <div class="contextmenu__item"
         >更名文件</div>
    </div>
methods: {
          foo() {
            // 取消鼠标监听事件 菜单栏
            this.menuVisible = false
            document.removeEventListener('click', this.foo) // 关掉监听,
          },
          styleMenu(menu) {
            if (event.clientX > 1800) {
              menu.style.left = event.clientX - 100 + 'px'
            } else {
              menu.style.left = event.clientX + 1 + 'px'
            }
            document.addEventListener('click', this.foo) // 给整个document新增监听鼠标事件,点击任何位置执行foo方法
            if (event.clientY > 700) {
              menu.style.top = event.clientY - 30 + 'px'
            } else {
              menu.style.top = event.clientY - 10 + 'px'
            }
          },
          rightClick(row, column, event){
            // if(column.id){
              this.pid = column.id;
              this.testModeCode = row.testModeCode
              this.menuVisible = false // 先把模态框关死,目的是 第二次或者第n次右键鼠标的时候 它默认的是true
              this.menuVisible = true // 显示模态窗口,跳出自定义菜单栏
              // event.preventDefault() //关闭浏览器右键默认事件
              this.CurrentRow = row
              var menu = document.querySelector('.menu')
              this.styleMenu(menu)
            // }else{
            // }
            
          },
}
 
style{
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

}

elementui树状结构添加右键点击事件的更多相关文章

  1. react添加右键点击事件

    1.在HTML里面支持contextmenu事件(右键事件).所以需要在组建加载完时添加此事件,销毁组建时移除此事件. 2. 需要增加一个state,名称为visible,用来控制菜单是否显示.在_h ...

  2. 给ECharts添加右键点击事件,实现右键功能菜单

    由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...

  3. Android无限级树状结构

    通过对ListView简单的扩展.再封装,即可实现无限层级的树控件TreeView. package cn.asiontang.nleveltreelistview; import android.a ...

  4. 由简入繁实现Jquery树状结构

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...

  5. 使用Map辅助拼装树状结构,消除递归调用

    目前菜单或其他树状结构在数据库中的存储,多数是以一个parentid作为关联字段,以一维形式存储.使用时全部查询出来,然后在内存中拼装成树状结构.现在主要涉及的是拼装方法的问题. 一般可以进行 递归调 ...

  6. tkinter中树状结构的建立(十四)

    树状结构的建立 import tkinter from tkinter import ttk wuya = tkinter.Tk() wuya.title("wuya") wuya ...

  7. 将lits集合转化为树状结构

    一,bean的类型: public class DeptListRES { /** * 子节点 */ private List<DeptListRES> children; private ...

  8. 用Django ORM实现树状结构

    前言 之前看对于用关系数据库实现树状结构的方法就知道一直做自关联的表,但是感觉自关联查询太慢了,最近看到一篇文章,感觉视野开拓了好多,文章:数据库表设计,没有最好只有最适合来自:微信. 下面就针对这里 ...

  9. JQuery 树状结构 jQuery-treeview.js 插件

    由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...

  10. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

随机推荐

  1. C#中检查null的语法糖,非常实用

    c#处理null的几个语法糖,非常实用.(尤其是文末Dictionary那个案例,记得收藏) ??如果左边是的null,那么返回右边的操作数,否则就返回左边的操作数,这个在给变量赋予默认值非常好用. ...

  2. 继承QAbstractTableModel QStyledItemDelegate实现自定义表格,添加进度条和选中框。

    由于项目要求,需要实现一个列表目录显示信息,并且需要实现每一项提供进度条和选项框功能,所以需要继承QAbstractTableModel和QStyledItemDelegate进行自定义. -自定义数 ...

  3. Kubernetes(k8s)控制器(二):DaemonSet

    目录 一.系统环境 二.前言 三.DaemonSet 概览 四.创建DaemonSet 4.1 创建daemonset 让其在k8s集群所有worker节点运行pod 4.2 创建daemonset让 ...

  4. C#Autofac依赖注入批量注入 (目前版本.netcore3.0)

    上一文:C#依赖注入一看就会系列 链接:C#依赖注入(直白明了)讲解 一看就会系列 - 22222220 - 博客园 (cnblogs.com) 上一次我们知道了 为什么要依赖注入,这次我们就用使用人 ...

  5. Thymeleaf中判断Security权限 - SpringBoot

    参考:https://blog.csdn.net/perfect_red/article/details/110821582

  6. CentOS7 RPM方式安装JDK

    1.下载jdk rpm Java Downloads | Oracle 中国 https://www.oracle.com/cn/java/technologies/downloads/#jdk19- ...

  7. pnpm

    一.概念 performant npm ,意味"高性能的 npm".pnpm由npm/yarn衍生而来,解决了npm/yarn内部潜在的bug,极大的优化了性能,扩展了使用场景.被 ...

  8. 举例说明postman接口测试

    接口测试的本质就是接口的数据和数据库里的数据作对比 接口测试,可以理解为测的是后端的程序,而系统测试的时候,测试的是前端的程序,前端只有在满足条件的时候才会调到接口,所以接口测试可以测得更全面更准确 ...

  9. cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置 行:1 字符: 1

    出现问题原因: 使用vscode终端powershell控制台查看cnpm版本或者运行cnpm的相关命令时提示如标题错误(cmd控制台提示:'cnpm' 不是内部或外部命令,也不是可运行的程序或批处理 ...

  10. Netty进阶

    1.Netty问题 TCP协议都存在着黏包和半包问题,但是UDP没有 1.粘包现象 发送方分10次发送,接收方一次接受了10次发送的消息 2.半包现象 调整服务器的接受缓冲区大小(调小) 半包会导致服 ...