How to implement right-click menu in Vue
Editor to share with you how to achieve Vue right-click menu, I hope you will gain something after reading this article, let's discuss it together!
Effect picture
Installation
Npm 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 follows:
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: "intercept web pages (R)", minWidth: 0, children: [{label: "intercept visual areas", onClick: () = > {this.message = "intercept visual areas" Console.log ("intercept visualization area") }}, {label: "capture full screen"}]}, {label: "View web 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;}
The menu options are all in the items array and can be configured as needed. Right click at this time, the menu pop-up window miraculously appears, is not very simple!
Custom style
Open the console and look at the elements to see each class name of the menu. The outermost class is the value set by the customClass property above, and the style can be adjusted as needed.
. custom-class .menu _ item__available:hover,.custom-class .menu _ item_expand {background: # ffecf2! important; color: # ff4050! important;}
Summary
The above is the basic use of the method, is not than their own packaging to save a lot of time. Note that the menu is automatically destroyed when you click the left button or scroll, and you can also call this.$contextmenu.destroy () to destroy it in other scenarios. The following is the parameter configuration for the plug-in:
MenuOptions menu Properties
MenuItemOptions option Properties
After reading this article, I believe you have a certain understanding of "how to achieve right-click menu in Vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
