vue怎么自定义右键菜单
导读：本文共960.5字符，通常情况下阅读需要3分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1.在需要添加右键的页面，绑定contextmenu事件（阻止浏览器默认事件，添加自定义事件）<div@contextmenu.prevent.native="openMenu($event)">....</div>2.在页面编写右键菜单的内容<ulv-show="visible":cla... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。
1.在需要添加右键的页面，绑定contextmenu事件（阻止浏览器默认事件，添加自定义事件）
<div@contextmenu.prevent.native="openMenu($event)">....</div>
2.在页面编写右键菜单的内容
<ulv-show="visible":class="contextmenu"><li@click="test">添加节点</li><li@click="test">添加节点</li></ul>
3.在data()中定义需要的变量属性
data(){return{visible:false,top:0,left:0}}4.创建监听事件，来触发关闭右键菜单的方法
watch:{visible(value){if(value){document.body.addEventListener('click',this.closeMenu)}else{document.body.removeEventListener('click',this.closeMenu)}}},5.打开和关闭右键菜单的两个方法
//startopenMenu(e){varx=e.pageX;vary=e.pageY;this.top=y;this.left=x;this.visible=true;//在这里控制右键菜单的打开},//closecloseMenu(){this.visible=false;},6.样式
.contextmenu{margin:0;background:#fff;z-index:3000;position:absolute;list-style-type:none;padding:5px0;border-radius:4px;font-size:12px;font-weight:400;color:#333;box-shadow:2px2px3px0rgba(0,0,0,0.3);}.contextmenuli{margin:0;padding:7px16px;cursor:pointer;}.contextmenuli:hover{background:#eee;} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue怎么自定义右键菜单的详细内容，希望对您有所帮助，信息来源于网络。