1 Minute Vue implementiert Rechtsklickmenü

npm installiere vue-contextmenujs

Garn fügt Vue-Kontextmenüs hinzu

Kontextmenü aus „vue-contextmenujs“ importieren
Vue.use(Kontextmenü);

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

<Skript>
Vue von „vue“ importieren
Kontextmenü aus „vue-contextmenujs“ importieren
Vue.use(Kontextmenü);
Standard exportieren {
  Methoden: {
    onContextmenu(Ereignis) {
      dies.$contextmenu({
        Artikel: [
          {
            Bezeichnung: "Rückkehr (B)",
            bei Klick: () => {
              this.message = "Zurück (B)";
              console.log("return(B)");
            }
          },
          { label: "Vorwärts(F)", deaktiviert: true },
          { label: "Neu laden (R)", divided: true, icon: "el-icon-refresh" },
          { label: "Speichern unter (A)...." },
          { label: "Drucken (P)...", icon: "el-icon-printer" },
          { label: "Projektion (C)...", divided: true },
          {
            Bezeichnung: „Webübersetzung verwenden (T)“,
            geteilt: wahr,
            minBreite: 0,
            untergeordnete Elemente: [{ label: "In vereinfachtes Chinesisch übersetzen" }, { label: "In traditionelles Chinesisch übersetzen" }]
          },
          {
            Bezeichnung: „Webseite erfassen (R)“,
            minBreite: 0,
            Kinder: [
              {
                Beschriftung: „Visualisierungsbereich ausschneiden“,
                bei Klick: () => {
                  this.message = "Visualisierungsbereich erfassen";
                  console.log("Intercept-Visualisierungsbereich");
                }
              },
              { label: "Vollbild erfassen" }
            ]
          },
          { label: "Quellcode der Seite anzeigen (V)", icon: "el-icon-view" },
          { label: "Prüfen(N)" }
        ],
        event, // Informationen zum Mausereignis customClass: "custom-class", // Benutzerdefinierte Menüklasse
        zIndex: 3, // Menüstil z-index
        minWidth: 230 // Minimale Breite des Hauptmenüs });
      gibt false zurück;
    }
  }
};
</Skript>

<Stil>
.custom-class .menu_item__available:hover,
.benutzerdefinierte Klasse .menu_item_expand {
  Hintergrund: #ffecf2 !wichtig;
  Farbe: #ff4050 !wichtig;
}
</Stil>