antv x6使用Vue+ElementPlus实现右键菜单

基于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
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值