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

A practical record of encountering XSS attack in a VUE project

Table of contents Preface Discover the cause Cust...

About MySQL innodb_autoinc_lock_mode

The innodb_autoinc_lock_mode parameter controls t...

MySQL 8.0 New Features - Introduction to Check Constraints

Table of contents Preface Check Constraints Creat...

Use of Linux ipcs command

1. Command Introduction The ipcs command is used ...

JavaScript canvas to achieve colorful clock effect

Use canvas to write a colorful clock! 1. Title (1...

How to install Elasticsearch7.6 cluster in docker and set password

Table of contents Some basic configuration About ...

Comprehensive analysis of isolation levels in MySQL

When the database concurrently adds, deletes, and...

How to quickly add columns in MySQL 8.0

Preface: I heard a long time ago that MySQL 8.0 s...

Common structural tags in XHTML

structure body, head, html, title text abbr, acro...

HTML input file control limits the type of uploaded files

Add an input file HTML control to the web page: &...

Solve the problem of managing containers with Docker Compose

In Docker's design, a container runs only one...