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 $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
php中常用的预定义变量小结
2012/05/09 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
js href的用法
2010/05/13 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
python使用matplotlib绘制折线图教程
2017/02/08 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
装饰活动策划方案
2014/02/11 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
中国世界遗产导游词
2015/02/13 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android