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 的 v-model用法实例
Nov 23 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue使用watch监听属性变化
Apr 30 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
一个简洁的多级别论坛
2006/10/09 PHP
PHP 表单提交给自己
2008/07/24 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
对javascript继承的理解
2016/10/11 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
NW.js 简介与使用方法
2018/02/01 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python机器学习之随机森林(七)
2018/03/26 Python
python list元素为tuple时的排序方法
2018/04/18 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
电子商务求职信
2014/06/15 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
virtualenv隔离Python环境的问题解析
2022/06/21 Python