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 26 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue3不同环境下实现配置代理
May 25 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Python出现segfault错误解决方法
2016/04/16 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python 读取串口数据的示例
2020/11/09 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
物流专业大学应届生求职信
2013/11/03 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
幼儿园安全责任书
2014/04/14 职场文书
团结演讲稿范文
2014/05/23 职场文书
计算机专业自荐信
2014/05/24 职场文书
本科毕业生求职信
2014/06/15 职场文书
反四风对照检查材料
2014/09/22 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
债务授权委托书范本
2014/10/17 职场文书
升职感谢信
2015/01/22 职场文书
个人工作表现自我评价
2015/03/06 职场文书
出国留学导师推荐信
2015/03/26 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
Python中os模块的简单使用及重命名操作
2021/04/17 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle