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

news2025/1/10 1:22:49

基于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(ElMenuItem, { key: element.key, style: {
            height: '30px'
            }, onClick(){
              if (element.click) element.click(e)
            } }, element.label)
        })
      )
      render(VNode, this.container)
      document.addEventListener('mousedown', this.onMouseDown)
    }
  }

  private onContextMenu(e) {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = 0
    }
    this.toggleContextMenu(true, e)
  }

  delegateEvents() {
    this.cellView.on('cell:contextmenu', this.onContextMenu, this)
    return super.delegateEvents()
  }

  protected onRemove() {
    this.cellView.off('cell:contextmenu', this.onContextMenu, this)
  }
}

使用:

import { ContextMenuTool } from './context_menu.ts'

ContextMenuTool.config({
  tagName: 'div',
  isSVGElement: false,
})

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const menu = [
  {
    key: 'input',
    label: '输入内容',
    click(view) {
      console.log(view)
    }
  },
  {
    key: 'flow',
    label: '查看流水'
  }
]

graph.addNode({
  shape: 'core_boss_node', // 自定义的节点
  x: 100,
  y: 150,
  id: 'id1',
  tools:[
          {
             name: 'contextmenu',
             args: {
                 menu,
             },
          },
   ]
})

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1969359.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

公司的Spring框架接受MIME类型为json格式的带null的字符串,然后这个带null的字段被自动忽略了,排查了好久

接收方法: 解决方案: 先去掉RequsetBody 因为使用RequsetBody时,框架会调用HttpMessageConvert读取HttpRequest的InputStram反序列化为对象,这个InputStram只能读一次。 后续你的代码再通过Reader读输入流时,已经没有…

小米SU7对手来了,魅族汽车今年上市

新能源车市场竞争白热化的 2024 年,那些当初一股脑扎堆入场的各路新势力们,估计压根没想到造个车也能这么卷吧! 还是那句话,当一个行业开始极度内卷,也就意味着已经到了整个淘汰赛最残酷的环节。 目前来说&#xff0…

相位相关法图像配准

小结:本文主要介绍基于相位相关法的图像配准。 1. 相位相关法 在时域中信号的平移运动可以通过在频域中相位的变化表现出来(这是傅里叶变换的特性,见下图)。平移不影响傅氏变换的幅值(谱),对应…

利用人工智能ChatGPT自动生成基于PO的数据驱动测试框架

简介 PO(PageObject)设计模式将某个页面的所有元素对象定位和对元素对象的操作封装成一个 Page 类,并以页面为单位来写测试用例,实现页面对象和测试用例的分离。 数据驱动测试(DDT)是一种方法&#xff0c…

IOday5

一、思维导图 二、练习 使用两个线程完成两个文件的拷贝&#xff0c;分支线程1拷贝前一半&#xff0c;分支线程2拷贝后一半&#xff0c;主线程回收两个分支线程的资源 #include<myhead.h>//定义结构体存储需要传到线程函数中的内容 struct Buf {const char *file[2]; …

Python爬虫:下载人生格言

Python爬虫:下载人生格言 爬取网页 将这些格言下载存储到本地 代码: import requests #导入requests库&#xff0c;用于提取网页 from lxml import etree#导入lxml库&#xff0c;用于Xpath数据解析#请求头 header{ user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) A…

aurora8b10b ip的使用(未完)

文章目录 一、Aurora8B/10B协议二、时钟、复位与状态指示1、时钟2、复位3、状态指示 三、数据发送、接受接口&#xff08;1&#xff09;AXI4-Stream位排序&#xff08;2&#xff09;Streaming接口&#xff08;3&#xff09;Framing接口&#xff08;帧传输接口&#xff09; 四、…

输入成绩问题(c语言)

1.问题&#xff1a;期中考试开始了&#xff0c;大家想要取得好成绩&#xff0c;争夺前五名&#xff0c;从键盘输入n个学生成绩&#xff08;不超过40个&#xff09;&#xff0c;输出每组的前五名的成绩 两行&#xff0c;第一行输入一个整数&#xff0c;表示n个学生&#xff08;…

springboot学习笔记第一天

springboot的简单了解 Java Spring 是一个开源的轻量级应用框架&#xff0c;在 Java 应用开发中起到了简化开发、提高效率、促进模块化和松耦合、支持技术集成等多重作用&#xff0c;成为了广大企业和开发者首选的企业级 Java 应用开发框架之一。 Spring Boot 是一个基于 Spr…

深度学习中6种loss函数Pytorch API调用示例

自定义数据 import torch import torch.nn as nn import torch.nn.functional as Fbatchsize2 num_class4logitstorch.randn(batchsize,num_class) targettorch.randint(num_class,size(batchsize,))#delta目标分布 target_logitstorch.randn(batchsize,num_class)#非delta目标…

浏览器中的同源策略、CORS 以及相关的 Fetch API 使用

前言 笔者对前端 Web 技术的认真学习&#xff0c;其实开始于与 Fetch API 的邂逅。当时觉得 fetch() 的设计很不错&#xff0c;也很希望能够请求其它网站下的数据并作处理和展示。学习过程中 HTML 和 CSS 都还好说&#xff0c;由于几乎没有 Web 技术的基础&#xff0c;学习 Fe…

vue配置多个环境变量ENV【收藏版】

vue配置多个环境变量 1. 创建环境变量文件 在你的Vue项目根目录下&#xff0c;你可以创建以下环境变量文件&#xff1a; .env&#xff1a;所有环境都会加载的通用变量。 .env.local&#xff1a;本地覆盖&#xff0c;不会被git跟踪。 .env.[mode]&#xff1a;只有指定模式才会…

1007 Maximum Subsequence Sum(Java)

题目 解释 题目说的就是给你一串K个数字&#xff0c;让你找到连续的和最大的子串&#xff0c;同时输出子串的和、子串起始的元素、子串末尾的元素&#xff0c;如果K个数字全是负数&#xff0c;输出子串和为0、子串起始元素为整个字符串的第一个元素&#xff0c;子串末尾元素为…

CompletableFuture并行编程生产问题处理

前提 本文章是在项目中发现一些同学对并行编程的思想理解&#xff0c;或者说对代码的执行逻辑有些理解偏颇的地方。特整理此文章进行分享&#xff0c;希望有同样困惑的小伙伴能够对此类问题有一个清晰的理解。 在此不会介绍CompletableFuture对库函数用法&#xff0c;因为库函数…

XSS-labs靶场(超详解)1-20关——附原码

level1 原码 <!DOCTYPE html><!--STATUS OK--><html> <head> <meta http-equiv"content-type" content"text/html;charsetutf-8"> <script> window.alert function() { confirm("完成的不错&#xff0…

【Java】字符串StringBuilder类和Stringjoiner类(013)

目录 ♦️StringBuilder类 &#x1f38f;StringBuilder构造方法 &#x1f421;无参构造 &#x1f421;有参构造 &#x1f38f;SringBuilder常用方法 &#x1f38f;StringBuildre类练习题&#xff1a; &#x1f421;对称字符串 &#x1f421;拼装字符串 ♦️Stringjoine…

(Python)内存管理

前言 内存泄漏在编程中是一个严重的问题&#xff0c;可能导致程序性能下降、系统不稳定甚至崩溃。 目录 危害 风险 动态内存分配 引用计数 内存池 垃圾回收 设计原则 危害 性能下降&#xff1a;可用内存减少&#xff0c;导致系统频繁进行内存交换&#xff0c;使程序运行…

Netdevops入门之Telnetlib语法案例

1、Telnetlib模块&#xff1a; 支持telnet/ssh远程访问的模块很多&#xff0c;常见的有telnetlib、ciscolib、paramiko、netmiko、pexpect,其中telnetlib和ciscolib对应telnet协议&#xff0c;后面3个对应SSH协议。 ①-通过ENSP环境搭建实验环境 ②-基础语法-telnetlib案例1&…

最优控制、轨迹优化相关笔记、感悟

写在前面 上学期和最近无聊在看一些最优控制、轨迹优化相关的内容&#xff0c;涉及到MIT Russ Tedrake教授的Underactuated Robotics&#xff0c;以及CMU Zachary Manchester教授的Optimal Control&#xff08;两套课程其实挺像的&#xff09;&#xff0c;加起来估计也看了十多…

机器学习算法(二)线性模型

一、线性回归 假设自变量X矩阵有3个特征&#xff0c;因变量是Y矩阵&#xff0c;w是系数矩阵 Y X * w 损失函数&#xff1a;误差平方和函数&#xff08;Y - label&#xff09;** 2 二、逻辑回归 线性回归得到的是一个实数值 z &#xff0c;用sigmoid函数可以将其映射到 0 …