Vue+element-ui添加自定义右键菜单的方法示例


Posted in Vue.js onDecember 08, 2020

1、在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件

<template>
<el-button size="medium"  @contextmenu.prevent.native="openMenu($event)">
......
</template>

2、在页面编写右键菜单内容

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
   <li>上移一层</li>
   <li>下移一层</li>
 </ul>

3、在data()中定义需要的变量属性

data() { 
	return {
			visible: false,
			top: 0,
			left: 0
	}
}

4、观察visible的变化,来触发关闭右键菜单,调用关闭菜单的方法

watch: {
  visible(value) {
   if (value) {
    document.body.addEventListener('click', this.closeMenu)
   } else {
    document.body.removeEventListener('click', this.closeMenu)
   }
  }
 },

5、在method中定义打开右键菜单和关闭右键菜单的两个方法

openMenu(e) {
   const menuMinWidth = 105
   const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
   const offsetWidth = this.$el.offsetWidth // container width
   const maxLeft = offsetWidth - menuMinWidth // left boundary
   const left = e.clientX - offsetLeft // 15: margin right

   if (left > maxLeft) {
    this.left = maxLeft
   } else {
    this.left = left
   }

   this.top = e.clientY - 60 // fix 位置bug
   this.visible = true
  },
  closeMenu() {
   this.visible = false
  }

6、在style中写右键菜单的样式

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
   margin: 0;
   padding: 7px 16px;
   cursor: pointer;
   &:hover {
    background: #eee;
   }
  }
 }

注意:.native修饰符对vue组件元素监听原生事件有效,对原生的html元素使用,反而没有效果。

到此这篇关于Vue+element-ui添加自定义右键菜单的文章就介绍到这了,更多相关Vue+element-ui添加自定义右键菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 #Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 #Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 #Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 #Vue.js
You might like
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
网站开发实习生的自我评价
2013/12/11 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
出国考察邀请函
2014/01/21 职场文书
司机检讨书
2014/02/13 职场文书
优秀实习生感言
2014/03/01 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
初三学生个人自我评定
2014/04/06 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS