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

attribute describe type An optional value The default value
items Menu structure Information MenuItem[] – –
event Mouse event information Event – –
x Menu displays X coordinate, existseventThe failure number – 0
y Menu displays Y coordinate, existseventThe failure number – 0
zIndex The menu stylez-index number – 2
customClass Custom menu class string – –
minWidth Minimum width of main menu number – 150

MenuItem

attribute describe type An optional value The default value
label Menu item name string – –
icon Menu item icon, generated<i class="icon"></i>The element string – –
disabled Whether to disable menu items boolean – false
divided Whether to display the dividing line boolean – false
customClass Custom submenu class string – –
minWidth Minimum width of submenu number – 150
onClick Menu item Click event Function() – –
children Submenu structure information MenuItem[] – –

Welcome to follow my blog public number