import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
<template>
 <div id="app" style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
export default {
 methods: {
  onContextmenu(event) {
   this.$contextmenu({
    items: [
     {
      label: "返回(B)",
      onClick: () => {
       this.message = "返回(B)";
       console.log("返回(B)");
      }
     },
     { label: "前進(jìn)(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>

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

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