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)
After obtaining the system time using Java and st...
Table of contents Introduction to stored procedur...
1. Introduction Is it considered rehashing old st...
Today, when I was looking at the laboratory proje...
Golden Rules of Performance: Only 10% to 20% of e...
First download VMware Workstation 15.1 version. I...
Table of contents principle Network environment p...
Table of contents Preface: 1. Introduction to Use...
I recently started learning about database knowle...
The offline installation method of MySQL_8.0.2 is...
Vue first screen performance optimization compone...
Table of contents Preface How does antd encapsula...
1. Download the mysql repo source $ wget http://r...
Congratulations on finally convincing your bosses...
Detailed explanation of MySQL exporting data from...