vue 右键使用 组件vue-contextmenujs

vue-contextmenujs文档

1、安装 vue-contextmenujs

npm install vue-contextmenujs

yarn add vue-contextmenujs

2、在main.js文件中引入

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

// 在组件中调用显示菜单

this.$contextmenu(options:MenuOptions)

// 鼠标点击或滚轮自动销毁, 也可手动销毁

this.$contextmenu.destroy();

// 去除浏览器默认菜单

event.preventDefault()

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

**

组件中使用

在这里插入代码片

 const options = {
        items: [
          { label: '复制', divided: true },
          { label: '转发' },
          { label: '引用', divided: true },
          { label: '撤回' }
        ],
        event: val.event,
        x: val.event.clientX,
        y: val.event.clientY,
        customClass: 'custom-class',
        zIndex: 3000,
        minWidth: 80
      }
      this.$contextmenu(options)

注意：如果在组件中一直不显示，改变层级 zindex 会有效果的！试试！