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

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!

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.