1 minute Vue implements right-click menu

Rendering
Install
Code Implementation
Custom styles
Summarize

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

Install

npm install vue-contextmenujs

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:

Custom right-click menu plugin in Vue
Vue native method to customize the right-click menu
Vue implements the right-click menu bar
Vue implements custom global right-click menu
Simple encapsulation of Vue right-click menu
Complete example of adding a custom right-click menu to Vue
How to customize the right-click menu in Vue
Native Vue implements the right-click menu component function
Method for implementing the right-click menu in the Table component row in Vue (based on vue + AntDesign)
Vue el-table implements right-click menu function

<<: iframe adaptive size implementation code

>>: Several ways to encrypt and decrypt MySQL (summary)