这篇文章主要给大家介绍了关于vue添加自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、写原生方法
1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下：
<li> ... </li>
2.在页面编写右键菜单内容:
<ul class="contextmenu"> <!-- <li>打开</li> <li>删除</li> <li>下载</li> <li>预览</li> <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, item) { this.rightClickItem = item; var x = e.pageX; var y = e.pageY; this.top = y; this.left = x; 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); } .contextmenu li { margin: 0; padding: 7px 16px; cursor: pointer; } .contextmenu li:hover { background: #eee<div style="color:transparent">本文来源gaodai.ma#com搞#代!码(网</div>; }
参考链接
二、使用插件vue-context-menu
demo地址
github地址
安装：
npm install vue-contextmenu --save
引用：
import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu)
使用：
<div id="app" style="width: 100px;height: 100px;margin-top: 20px;background: red"> </div>
tip:有说不兼容ie的，具体没有测试
到此这篇关于vue添加自定义右键菜单的文章就介绍到这了,更多相关vue添加自定义右键菜单内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是vue添加自定义右键菜单的完整实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue添加自定义右键菜单的完整实例
转载请注明原文链接：vue添加自定义右键菜单的完整实例
