目錄

• 效果圖
• 安裝
• 程式碼實現
• 自定義樣式
• 總結

高效實現需求，避免重複造輪子。今天給大家分享的是，如何在最短的時候內實現右鍵選單。方法也很簡單，一個外掛就可以搞定，話不多說，上效果圖：

效果圖

安裝

npm install -contextmenu

或

yarn add vue-contextmenujs

使用

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

程式碼實現

以element-ui圖示為例實現右鍵選單，圖示會為被渲染為<i class="icon"></i>，程式碼如下：

<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: "返回(B)",onClick: () => {
              this.message = "返回(B)";
              console.log("返回(B)");
            }
          },{ label: "前進(F)",disabled: true },{ label: "重新載入(R)",divided: true,icon: "el-icon-refresh" },{ label: "另存為(A)..." },{ label: "列印(P)...",icon: "el-icon-printer" },{ label: "投射(C)...",divided: true },{
            label: "使用翻譯(T)",BSfNiN
 
         divided: true,minWidth: 0,children: [{ label: "翻譯成簡體中文" },{ label: "翻譯成繁體中文" }]
 BSfNiN         },{
            label: "擷取網頁(R)",children: [
    http://www.cppcns.com          {
                label: "擷取視覺化區域",onClick: () => {
                  this.message = "擷取視覺化區域";
                  console.log("擷取視覺化區域");
                }
              },{ label: "擷取全屏" }
            ]
          },{ label: "檢視網http://www.cppcns.com
 
頁原始碼(V)",icon: "el-icon-view" },{ label: "檢查(N)" }
        ],event,// 滑鼠事件資訊
        customClass: "custom-class",// 自定義選單 class
        zIndex: 3,// 選單樣式 z-index
        minWidth: 230 // 主選單最小寬度
      });
      return false;
    }
  }
};
</script>

選單選項都在items數組裡面，可根據需要自行配置。這時候點選右鍵，選單彈窗就神奇地出現了，是不是很簡單!

自定義樣式

開啟控制檯，檢視元素即可檢視到選單的各個 class 名稱。最外層的 class 為上面的customClass屬性設定的值，樣式可根據需求自行調整。

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

總結

以上就基本使用方法，是不是比自己封裝節省了大把時間。注意選單會在點選左鍵或者滾輪滾動時自動銷燬，同時也可呼叫this.$contextmenu.destroy()在其他場景自行銷燬 。以下是外掛的引數配置：

MenuOptions 選單屬性

MenuItemOptions 選項屬性

到此這篇關於1分鐘Vue實現右鍵選單的文章就介紹到這了,更多相關Vue 右鍵選單內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！