How to customize the right-click menu for vue

Today, the editor will share with you the relevant knowledge points about how to customize the right-click menu in vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1. On the page where you need to add the right button, bind the contextmenu event (block browser default events, add custom events)

....

two。 Write the contents of the right-click menu on the page

Add node add node

3. Define the required variable attributes in data ()

Data () {return {visible: false, top: 0, left: 0}}

4. Create a listening event to trigger a method to close the right-click menu

Watch: {visible (value) {if (value) {document.body.addEventListener ('click', this.closeMenu)} else {document.body.removeEventListener (' click', this.closeMenu)}

5. Two ways to open and close right-click menus

/ / startopenMenu (e) {var x = e.pageX; var y = e.pageY; this.top = y; this.left = x; this.visible = true;// controls the opening of the right-click menu here}, / / closecloseMenu () {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 } these are all the contents of the article "how to customize the right-click menu in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.