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 20 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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开发工具之vs2005图解
2008/01/12 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python中static相关知识小结
2018/01/02 Python
python中pip的安装与使用教程
2018/08/10 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
EntityManager都有哪些方法
2013/11/01 面试题
团员个人的自我评价
2013/12/02 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
党员检讨书范文
2014/12/27 职场文书
会议主持词通用版
2019/04/02 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
golang正则之命名分组方式
2021/04/25 Golang
PHP实现两种排课方式
2021/06/26 PHP
SQL之各种join小结详细讲解
2021/08/04 MySQL