VUE项目中使用【vue-contextmenujs】自定义右键菜单

最新推荐文章于 2025-10-31 15:16:08 发布

原创最新推荐文章于 2025-10-31 15:16:08 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何使用vue-contextmenujs库实现Vue项目的右键菜单功能。通过安装库、全局注册并应用到具体元素上，展示了如何响应右键点击事件及自定义菜单项。

1、安装 vue-contextmenujs

npm install vue-contextmenujs

2、在main.js文件中引入

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);

3、在 .vue文件中使用

<div 
	v-for="item in defaultList" 
	:key="item.devId" 
	@contextmenu.prevent="(event) => {onContextmenu(event, item)}">
    <p>{{item.name}}</p>
</div>

/** 鼠标右键 */
onContextmenu(event, data) {
  this.$contextmenu({
    items: [
      {
        icon: "el-icon-edit",
        label: "修改板卡IP",
        onClick: () => {
          this.handleEdit(data);
        }
      },
    ],
    event,
    customClass: "class-a",
    zIndex: 3,
    minWidth: 100
  });
  return false;
},
handleEdit() {
	console.log(data);
}