Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the right-click menu bar in vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to realize the right-click menu bar in vue"!

vue implementation of the right menu bar and native js are similar, both need to understand two points

1. The contextmenu event is a mouse right-click event

2. To block browser default right-click events

code is as follows

// methodsrightShow() { let menu = this.$ refs.msgRightMenu this.isPersoncontextMenus = true var evt = event || window.event; var clientWidth = document.documentElement.clientWidth || document.body.clientWidth ; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var clientHeight = document.documentElement.clientHeight || document.body.clientHeight ; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ; //assign left and top to mouse positions respectively; menu.style.left = evt.pageX+"px"; menu.style.top = evt.pageY+"px"; //If you can't put the menu on the right side of the mouse, change the value of the left. if(evt.pageX+100>clientWidth+scrollLeft){//Menu should be on the left side of mouse; var left1 = evt.pageX-100; menu.style.left = left1+"px"; } //If you can't put the menu under the mouse, change the value of top if(evt.pageY+100>clientHeight+scrollTop){ var top1 = (evt.pageY-100); menu.style.top = top1+"px"; } menu.style.display = "block";},showNo(){ let menu = this.$ refs.msgRightMenu menu.style.display = "none";}//css style is for reference, write style according to your own needs #menu{ list-style: none; margin: 0px; padding: 0px; position: absolute; display: none; width: 100px; height: 100px; background-color: gray;}#menu li{ margin: 0px; padding: 0px;}//html//This is the outermost box, add self modifier can not conflict with other events //The prevent modifier here can directly block the default behavior of the browser //isPersoncontextMenus Don't forget to define this variable in data fish-flavored pork shredded potato with vinegar spicy crayfish twice-cooked pork

effect

At this point, I believe everyone has a deeper understanding of "how to realize the right-click menu bar of vue," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.