vue-contextmenujs

Vue native right-click menu components, zero dependence

The project address

Github.com/GitHub-Lazi…

The online demo

Fast installation

NPM install

npm install vue-contextmenujs
Copy the code

CDN

<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">
Copy the code

use

The element-UI icon was used in the tests

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
Copy the code

<template>
  <div id="app" style="width:100vw; height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>

<script>
export default {
  methods: {
    onContextmenu(event) {
      this.$contextmenu({
        items: [{label: "Return to (B)".onClick: (a)= > {
              this.message = "Return to (B)";
              console.log("Return to (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: "The projection (C)...".divided: true },
          {
            label: "Using web page Translation (T)".divided: true.minWidth: 0.children: [{ label: "Translated into Simplified Chinese" }, { label: "Translated into Traditional Chinese"}]}, {label: "Web Page Capture (R)".minWidth: 0.children: [{label: "Capture visual area".onClick: (a)= > {
                  this.message = "Capture visual area";
                  console.log("Capture visual area"); }}, {label: "Full screen capture"}]}, {label: "View page source code (V)".icon: "el-icon-view" },
          { label: "Check (N)" }
        ],
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "class-a".zIndex: 3.minWidth: 230
      });
      return false; }}};</script>
Copy the code

Parameters that

Menu

MenuItem

Welcome to follow my blog public number