原生Vue怎么實現右鍵菜單組件功能

這篇文章主要介紹原生Vue怎么實現右鍵菜單組件功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

Vue 原生實現右鍵菜單組件, 零依賴

快速安裝

npm install vue-contextmenujs

使用

測試中使用的是 element-ui 圖標

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
<template>
 <div id="app"  @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
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)",
      divided: true,
      minWidth: 0,
      children: [{ label: "翻譯成簡體中文" }, { label: "翻譯成繁體中文" }]
     },
     {
      label: "截取網頁(R)",
      minWidth: 0,
      children: [
       {
        label: "截取可視化區域",
        onClick: () => {
         this.message = "截取可視化區域";
         console.log("截取可視化區域");
        }
       },
       { label: "截取全屏" }
      ]
     },
     { label: "查看網頁源代碼(V)", icon: "el-icon-view" },
     { label: "檢查(N)" }
    ],
    event,
    customClass: "class-a",
    zIndex: 3,
    minWidth: 230
   });
   return false;
  }
 }
};
</script>

ps：下面看下vue點擊菜單以外區域，隱藏菜單操作

data() {
   return {
    menuShow: false //v-show標識隱藏顯示
   }
},

mounted (){
   let _this = this;
   document.addEventListener('click', function (e) {　　　　// 下面這句代碼是獲取 點擊的區域是否包含你的菜單，如果包含，說明點擊的是菜單以外，不包含則為菜單以內
   let flag = e.target.contains(document.getElementsByClassName('menu-class')[0])
   console.log(flag)
   if(!flag) return
   _this.menuShow = false
   })
}

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

以上是“原生Vue怎么實現右鍵菜單組件功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！