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 相关文章推荐
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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代码
2010/08/08 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JSON取值前判断
2014/12/23 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
详解python单例模式与metaclass
2016/01/15 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python中格式化字符串的四种实现
2020/05/26 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
十八大闭幕感言
2014/01/22 职场文书
机械专业求职信范文
2014/07/15 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
小平小道观后感
2015/06/09 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
奠基仪式致辞
2015/07/30 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript