1 minute Vue implements right-click menu

1 minute Vue implements right-click menu

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

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:
  • 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)

Recommend

Solve the problem of inconsistent MySQL storage time

After obtaining the system time using Java and st...

Detailed explanation of creating, calling and managing MySQL stored procedures

Table of contents Introduction to stored procedur...

Ideas and codes for implementing waterfall flow layout in uniapp applet

1. Introduction Is it considered rehashing old st...

How to query the minimum available id value in the Mysql table

Today, when I was looking at the laboratory proje...

A Guide to Optimizing High-Performance Websites

Golden Rules of Performance: Only 10% to 20% of e...

Detailed process of configuring NIS in Centos7

Table of contents principle Network environment p...

Detailed explanation of MySQL user rights management

Table of contents Preface: 1. Introduction to Use...

MySQL 8.0.2 offline installation and configuration method graphic tutorial

The offline installation method of MySQL_8.0.2 is...

Summary of Vue first screen performance optimization component knowledge points

Vue first screen performance optimization compone...

Implementation steps of encapsulating components based on React

Table of contents Preface How does antd encapsula...

How to install mysql on centos and set up remote access

1. Download the mysql repo source $ wget http://r...