原生Vue怎么實現(xiàn)右鍵菜單組件功能

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

Vue 原生實現(xiàn)右鍵菜單組件, 零依賴

快速安裝

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: "使用網(wǎng)頁翻譯(T)",
      divided: true,
      minWidth: 0,
      children: [{ label: "翻譯成簡體中文" }, { label: "翻譯成繁體中文" }]
     },
     {
      label: "截取網(wǎng)頁(R)",
      minWidth: 0,
      children: [
       {
        label: "截取可視化區(qū)域",
        onClick: () => {
         this.message = "截取可視化區(qū)域";
         console.log("截取可視化區(qū)域");
        }
       },
       { label: "截取全屏" }
      ]
     },
     { label: "查看網(wǎng)頁源代碼(V)", icon: "el-icon-view" },
     { label: "檢查(N)" }
    ],
    event,
    customClass: "class-a",
    zIndex: 3,
    minWidth: 230
   });
   return false;
  }
 }
};
</script>

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

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

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

Vue的優(yōu)點

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

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