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在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue elementUI表格控制对应列
Apr 13 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
实例详解Python模块decimal
2019/06/26 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
暑假实习求职信范文
2013/09/22 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
班级口号大全
2014/06/09 职场文书
公司委托书怎么写
2014/08/02 职场文书
社区志愿者活动方案
2014/08/18 职场文书
搞笑结婚保证书
2015/05/08 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技