vue中如何自定义右键菜单详解

在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下：

  <li
  v-for="item in resourceList"
  :key="item.id"
  @click="handleClickFolder(item)"
  @contextmenu.prevent="openMenu($event,item)"
  >
  </li>

在页面编写右键菜单内容:

<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.fileType!=99">下载</li>
 <li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
 <li @click="handleUpdate(rightClickItem)">编辑</li> -->
 <li>内容</li>
 </ul>

在data()中定义需要的变量属性

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

观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法

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

在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;
 }

在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;
}

参考文档地址

到此这篇关于vue中如何自定义右键菜单详解的文章就介绍到这了,更多相关vue自定义右键菜单内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！