基于X6官方给出的React版的右键菜单示例,实现Vue版本的,其中右键菜单使用的是ElMenu的样式。
import { ToolsView } from '@antv/x6'
import { h, render } from 'vue'
import { ElMenu, ElMenuItem } from 'element-plus'
export class ContextMenuTool extends ToolsView.ToolItem {
private timer: number
private onMouseDown = () => {
this.timer = window.setTimeout(() => {
this.toggleContextMenu(false)
}, 200)
}
private toggleContextMenu(visible: boolean, e?: any ) {
render(null, this.container)
document.removeEventListener('mousedown', this.onMouseDown)
if (visible && e) {
const VNode = h(
ElMenu,
{
style: {
position: 'fixed',
top: `${e.e.clientY + 10}px`,
left: `${e.e.clientX + 10}px`
}
},
this.options.menu.map((element) => {
return h