1 minute Vue implements right-click menu

npm install vue-contextmenujs

yarn add vue-contextmenujs

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

<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>

<style>
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
  background: #ffecf2 !important;
  color: #ff4050 !important;
}
</style>