Efficiently meet requirements and avoid reinventing the wheel. What I want to share with you today is how to implement the right-click menu in the shortest time possible. The method is also very simple, a plug-in can do it, without further ado, here is the effect picture: Rendering Installnpm install vue-contextmenujs or yarn add vue-contextmenujs use import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); Code Implementation Take the element-ui icon as an example to implement the right-click menu. The icon will be rendered as <i class="icon"></i>. The code is as follows: <template> <div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div> </template> <script> import Vue from 'vue' import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); export default { methods: { onContextmenu(event) { this.$contextmenu({ items: [ { label: "Return (B)", onClick: () => { this.message = "Return (B)"; console.log("return(B)"); } }, { label: "Forward(F)", disabled: true }, { label: "Reload (R)", divided: true, icon: "el-icon-refresh" }, { label: "Save as (A)..." }, { label: "Print (P)...", icon: "el-icon-printer" }, { label: "Projection (C)...", divided: true }, { label: "Use web translation (T)", divided: true, minWidth: 0, children: [{ label: "Translate into Simplified Chinese" }, { label: "Translate into Traditional Chinese" }] }, { label: "Capture web page (R)", minWidth: 0, children: [ { label: "Cut the visualization area", onClick: () => { this.message = "Capture visualization area"; console.log("Intercept visualization area"); } }, { label: "Capture full screen" } ] }, { label: "View page source code (V)", icon: "el-icon-view" }, { label: "Check(N)" } ], event, // Mouse event information customClass: "custom-class", // Custom menu class zIndex: 3, // Menu style z-index minWidth: 230 // Minimum width of the main menu }); return false; } } }; </script> The menu options are all in the items array and can be configured as needed. At this time, click the right button and the menu pop-up window will magically appear. Isn’t it very simple! Custom styles Open the console and view the elements to see the class names of the menu. The outermost class is the value set by the customClass attribute above, and the style can be adjusted according to needs. <style> .custom-class .menu_item__available:hover, .custom-class .menu_item_expand { background: #ffecf2 !important; color: #ff4050 !important; } </style> Summarize The above is the basic usage method. It saves a lot of time compared to packaging it yourself. Note that the menu will be automatically destroyed when you click the left button or scroll the wheel. You can also call this.$contextmenu.destroy() to destroy it in other scenarios. The following are the plugin configuration parameters: MenuOptions menu properties MenuItemOptions option properties This is the end of this article about implementing the right-click menu with Vue in 1 minute. For more relevant Vue right-click menu content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: iframe adaptive size implementation code
>>: Several ways to encrypt and decrypt MySQL (summary)
There are two types of html tags, inline elements...
This article uses an example to describe how to u...
1. Storage Engine In the last section, we mention...
Table of contents Preface Discover the cause Cust...
The innodb_autoinc_lock_mode parameter controls t...
Table of contents Preface Check Constraints Creat...
1. Command Introduction The ipcs command is used ...
1. Background The company's projects have alw...
Use canvas to write a colorful clock! 1. Title (1...
Table of contents Some basic configuration About ...
When the database concurrently adds, deletes, and...
Preface: I heard a long time ago that MySQL 8.0 s...
structure body, head, html, title text abbr, acro...
Add an input file HTML control to the web page: &...
In Docker's design, a container runs only one...