1、禁用div中浏览器自带的右键菜单，自定义方法

<div
     v-for="item in resourceList"
     :key="item.id"
     @click="handleClickFolder(item)"
     @contextmenu.prevent="openMenu($event,item)">
  <img/> 模块中的内容
</div>

2、编写右键菜单的内容

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
      <li @click="handleDelete(rightClickItem)">删除</li>
      <li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.Type!=0">下载</li>
      <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.Type!=0">预览</li>
</ul>

设置 Type 条件判断设置是否显示该菜单。

3、设置变量，控制菜单是否显示和位置；

data() { 
    return {
            visible: false,
            top: 0,
            left: 0
    }
}

4、使用钩子函数，如果数据发生变化，就触发关闭之前的菜单

watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  }

5、在method中定义菜单打开和关闭的方法

// 打开右键菜单
openMenu(e, item) {
      this.rightClickItem = item;

      let x = e.clientX;
      let y = e.clientY;

      this.top = y;
      this.left = x;
      
      this.visible = true;
    },
//关闭右键菜单
    closeMenu() {
      this.visible = false;
    }

6、在style中定义菜单的样式

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background-color: rgb(3, 125, 243);;
  color: white;
}