今天小编给大家分享一下Vue怎么自定义右键菜单的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在需要添加右键的页面,绑定con
今天小编给大家分享一下Vue怎么自定义右键菜单的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
在需要添加右键的页面,绑定contextmenu事件(阻止浏览器默认事件,添加自定义事件)
<div @contextmenu.prevent.native="openMenu($event)"> ....</div>
在页面编写右键菜单的内容
<ul v-show="visible" : class="contextmenu"> <li @click="test">添加节点</li> <li @click="test">添加节点</li></ul>
在data()中定义需要的变量属性
data() { return { visible: false, top: 0, left: 0 } }
创建监听事件,来触发关闭右键菜单的方法
watch: { visible(value) { if (value) { document.body.addEventListener('click', this.closeMenu) } else { document.body.removeEventListener('click', this.closeMenu) } } },
打开和关闭右键菜单的两个方法
//startopenMenu(e) { var x = e.pageX; var y = e.pageY; this.top = y; this.left = x; this.visible = true;//在这里控制右键菜单的打开},//closecloseMenu() { this.visible = false;},
样式
.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;}
以上就是“vue怎么自定义右键菜单”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。
--结束END--
本文标题: vue怎么自定义右键菜单
本文链接: https://www.lsjlt.com/news/326708.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0