1分でVueが右クリックメニューを実装

npm インストール vue-contextmenujs

yarn に vue-contextmenujs を追加

「vue-contextmenujs」からコンテキストメニューをインポートします。
Vue.use(コンテキストメニュー);

<テンプレート>
  <div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</テンプレート>

<スクリプト>
'vue' から Vue をインポートします
「vue-contextmenujs」からコンテキストメニューをインポートします。
Vue.use(コンテキストメニュー);
エクスポートデフォルト{
  メソッド: {
    onContextmenu(イベント) {
      this.$contextmenu({
        アイテム: [
          {
            ラベル: "戻る (B)",
            クリック時: () => {
              this.message = "戻る (B)";
              console.log("return(B)");
            }
          },
          { ラベル: "Forward(F)", 無効: true },
          { ラベル: "リロード (R)"、divided: true、アイコン: "el-icon-refresh" }、
          { ラベル: "(A) として保存..." },
          { ラベル: "印刷 (P)...", アイコン: "el-icon-printer" },
          { ラベル: "投影 (C)...", 分割: true },
          {
            ラベル: "Web翻訳を使用する (T)",
            分割: 真、
            最小幅: 0,
            子: [{ label: "簡体字中国語に翻訳" }, { label: "繁体字中国語に翻訳" }]
          },
          {
            ラベル: "Web ページをキャプチャ (R)"、
            最小幅: 0,
            子供たち： [
              {
                ラベル: 「視覚化領域を切り取る」、
                クリック時: () => {
                  this.message = "視覚化領域をキャプチャ";
                  console.log("インターセプト視覚化領域");
                }
              },
              { ラベル: "全画面をキャプチャ" }
            ]
          },
          { ラベル: "ページのソースコードを表示 (V)", アイコン: "el-icon-view" },
          { ラベル: "チェック(N)" }
        ]、
        event, // マウスイベント情報 customClass: "custom-class", // カスタムメニュークラス
        zIndex: 3, // メニュー スタイルの z インデックス
        minWidth: 230 // メインメニューの最小幅 });
      false を返します。
    }
  }
};
</スクリプト>

<スタイル>
.custom-class .menu_item__available:hover、
.custom-class .menu_item_expand {
  背景: #ffecf2 !重要;
  色: #ff4050 !重要;
}
</スタイル>