vue中如何自定义右键菜单详解


Posted in Vue.js onDecember 08, 2020

在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下:

<li
  v-for="item in resourceList"
  :key="item.id"
  @click="handleClickFolder(item)"
  @contextmenu.prevent="openMenu($event,item)"
  >
  </li>

在页面编写右键菜单内容:

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
 <!-- <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
 <li @click="handleDelete(rightClickItem)">删除</li>
 <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
 <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
 <li @click="handleUpdate(rightClickItem)">编辑</li> -->
 <li>内容</li>
 </ul>

在data()中定义需要的变量属性

data() { 
 return {
 visible: false,
 top: 0,
 left: 0
 }
}

观察visible的变化,来触发关闭右键菜单,调用关闭菜单的方法

watch: {
 visible(value) {
 if (value) {
 document.body.addEventListener('click', this.closeMenu)
 } else {
 document.body.removeEventListener('click', this.closeMenu)
 }
 }
 }

在method中定义打开右键菜单和关闭右键菜单的两个方法

openMenu(e, item) {
 this.rightClickItem = item;

 let x = e.clientX;
 let y = e.clientY;

 this.top = y;
 this.left = x;
 
 this.visible = true;
 },
 closeMenu() {
 this.visible = false;
 }

在style中写右键菜单的样式

.contextmenu {
 margin: 0;
 background: #fff;
 z-index: 3000;
 position: fixed;
 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);
}

.contextmenu li {
 margin: 0;
 padding: 7px 16px;
 cursor: pointer;
}

.contextmenu li:hover {
 background-color: rgb(3, 125, 243);;
 color: white;
}

到此这篇关于vue中如何自定义右键菜单详解的文章就介绍到这了,更多相关vue自定义右键菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
对vue生命周期的深入理解
Dec 03 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
详解Vue中的自定义指令
Dec 07 #Vue.js
vue-router定义元信息meta操作
Dec 07 #Vue.js
You might like
php中array_slice和array_splice函数解析
2016/10/18 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python爬取内容存入Excel实例
2019/02/20 Python
Django 重写用户模型的实现
2019/07/29 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
广告业务员岗位职责
2014/02/06 职场文书
应届大学生求职信
2014/07/20 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2015年清明节活动总结
2015/02/09 职场文书
教师党员个人总结
2015/02/10 职场文书
师范生见习总结范文
2015/06/23 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
导游词之潮音寺
2019/09/26 职场文书