vue3右键菜单

[kanocence]

提供一个右键菜单的思路

优点：简单
缺点：定位可能需要额外处理

[kanocence]

1. 监听 edge:contextmenu 事件
2. 使用 el-popover 组件虚拟触发和上面事件抛出的 event.view.container
3. 展示菜单

import { ClickOutside as vClickOutside } from 'element-plus';
import { createEventHook } from '@vueuse/core';

const addEventListener = (name: string) => {
  const listener = createEventHook<any>(); 
  graph?.on(name, listener.trigger);
  return listener;
};

const { on } = addEventListener('edge:contextmenu');
on((e) => {
  targetRef.value = e.view.container;
  popoverVisible.value = true;
});

function onClickOutside() {
  popoverVisible.value = false;
};

<el-popover
  :visible="popoverVisible"
  :virtual-ref="targetRef"
  trigger="click"
  placement="right"
  virtual-triggering
>
  <span v-click-outside="onClickOutside"> Some content </span>
</el-popover>