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

効率的に要件を満たし、車輪の再発明を回避します。本日ご紹介したいのは、右クリックメニューをできるだけ短時間で実装する方法です。方法も非常に簡単で、プラグインで実行できます。簡単に言うと、効果の画像は次のとおりです。

レンダリング

インストール

npm インストール vue-contextmenujs

または

yarn に vue-contextmenujs を追加

使用

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

コードの実装

右クリックメニューを実装するには、element-ui アイコンを例に挙げます。アイコンは <i class="icon"></i> としてレンダリングされます。コードは次のとおりです。

<テンプレート>
  <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 を返します。
    }
  }
};
</スクリプト>

メニューオプションはすべて items 配列内にあり、必要に応じて構成できます。このとき、右ボタンをクリックすると、メニューポップアップウィンドウが魔法のように表示されます。とても簡単ですね！

カスタムスタイル

コンソールを開いて要素を表示し、メニューのクラス名を確認します。最も外側のクラスは上記の customClass 属性で設定された値であり、スタイルは必要に応じて調整できます。

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

要約する

以上が基本的な使用方法ですが、自分で梱包するよりも大幅に時間が節約できます。左ボタンをクリックするか、ホイールをスクロールすると、メニューは自動的に破棄されることに注意してください。他のシナリオでは、this.$contextmenu.destroy() を呼び出してメニューを破棄することもできます。プラグインの構成パラメータは次のとおりです。

MenuOptions メニューのプロパティ

MenuItemOptions オプションのプロパティ

1分でVueで右クリックメニューを実装する方法についての記事はこれで終わりです。Vueの右クリックメニューに関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: