DDR爱好者之家

vue中如何自定义右键菜单详解
站长资源 2025/11/7 佚名
2 1538
DDR爱好者之家 Design By 杰米

在所编辑的页面，需要添加右键菜单的元素，绑定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;
}

参考文档地址

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米