vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单

news2024/10/6 12:22:47

1、下载插件:

npm i @imengyu/vue3-context-menu@1.3.6

 2、在页面中引入并使用插件:

<script setup>
import ContextMenu from "@imengyu/vue3-context-menu";

graph.on("node:contextmenu", ({ e, x, y, cell, view }) => {
  handleContextmenu(e);
});

// 右键菜单
const handleContextmenu = (e) => {
  const cells = graph.getSelectedCells();
  ContextMenu.showContextMenu({
    x: e.pageX,
    y: e.pageY,
    items: [
      {
        label: "复制(Ctrl+c&Ctrl+z)",
        disabled: cells.length === 0 ? true : false,
        onClick: () => {
          if (cells.length) {
            graph.copy(cells);
            if (!graph.isClipboardEmpty()) {
              const cells = graph.paste({ offset: 32 });
              // 解决复制的节点修改失效问题
              cells.forEach((item) => {
                let node = item.store.data;
                node.shape !== "data-processing-curve" &&
                  (node.data.id = node.id);
              });
              graph.cleanSelection();
              graph.select(cells);
            }
          }
        },
      },
      {
        label: "删除(Backspace)",
        disabled: cells.length === 0 ? true : false,
        onClick: () => {
          if (cells.length) {
            graph.removeCells(cells);
          }
        },
      },
    ],
  });
};
</script>

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

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

相关文章

本地磁盘消失了怎么办?本地磁盘不见了如何恢复

本地磁盘消失了怎么办&#xff1f;本地磁盘不见了如何恢复&#xff1f;在使用计算机过程中&#xff0c;有时候会遇到本地磁盘突然消失的情况&#xff0c;这让许多用户感到困扰。本文将针对这个问题进行探讨&#xff0c;介绍一些常见的磁盘恢复方法&#xff0c;帮助用户尽快解决…

【c++】类对象模型

1.如何计算类对象的大小 class A { public:void PrintA(){cout<<_a<<endl;} private:char _a; }; 问题&#xff1a;类中既可以有成员变量&#xff0c;又可以有成员函数&#xff0c;那么一个类的对象中包含了什么&#xff1f;如何计算一个类的大小&#xff1f; 2…

垃圾填埋气体监测与告警一体化环保监测5G云网关

数字化时代数据采集和传输我认为变得非常重要。为了满足这一需求&#xff0c;我们推出了一款具备多种功能的数据采集器。这款产品不仅集成了8DI干湿节点、4DO继电器、6AI电流/电压型传感器&#xff0c;还支持与多个云平台进行上行对接。通过这些功能&#xff0c;用户可以轻松实…

幻兽帕鲁服务器多少钱?4核16G支持32人在线吗?

4核16G服务器是幻兽帕鲁Palworld推荐的配置&#xff0c;阿里云和腾讯云均推出针对幻兽帕鲁的4核16G服务器&#xff0c;阿里云4核16G幻兽帕鲁专属服务器32元1个月、66元3个月&#xff0c;腾讯云4核16G14M服务器66元1个月、277元3个月、1584元一年。云服务器吧yunfuwuqiba.com分享…

人工智能顶会ICLR 2024热门研究方向大揭秘

图1 由ICLR 2024论文列表生成的词云 ICLR&#xff08;International Conference on Learning Representations&#xff09;自2013年起至今&#xff08;2024年&#xff09;已成功举办12届&#xff0c;被公认为人工智能领域的顶级会议之一。该会议由“深度学习三大巨头”中的 Y…

【深度学习:t-SNE 】T 分布随机邻域嵌入

【深度学习&#xff1a;t-SNE 】T 分布随机邻域嵌入 降低数据维度的目标什么是PCA和t-SNE&#xff0c;两者有什么区别或相似之处&#xff1f;主成分分析&#xff08;PCA&#xff09;t-分布式随机邻域嵌入&#xff08;t-SNE&#xff09; 在 MNIST 数据集上实现 PCA 和 t-SNE结论…

网络基础---初识网络

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、局域网…

$monitor和$strobe都看的是啥

注&#xff1a;本文来自硅芯思见 在编写测试平时&#xff0c;经常会用到$monitor和$strobe监测某些信号&#xff0c;并且使用格式上与$display比较类似&#xff0c;但是它们之间还是存在差异的&#xff0c;它们在当前仿真时间槽&#xff08;time-slot&#xff09;中被执行的区间…

网络安全03---Nginx 解析漏洞复现

目录 一、准备环境 二、实验开始 2.1上传压缩包并解压 2.2进入目录&#xff0c;开始制作镜像 2.3可能会受之前环境影响&#xff0c;删除即可 ​编辑 2.4制作成功结果 2.5我们的环境一个nginx一个php 2.6访问漏洞 2.7漏洞触发结果 2.8上传代码不存在漏洞 2.9补充&#…

中断控制器

1. 中断的理解 1.1 什么是中断 中断: 通常指 某种事件(中断源) 触发了 需要打断CPU , 让CPU暂停当前处理的(保存现场) 任务(usr模式下) 打断(irq异常) 转而去处理 这个事件(在irq模式中) ,事件处理结束后 需要回到(恢复现场) 打断处继续向后执行 1.2 中断控制器的作…

程序员如何应对中年危机

中年危机是一个普遍存在的问题&#xff0c;不仅仅局限于程序员这个职业。不过&#xff0c;对于程序员来说&#xff0c;由于技术更新迅速&#xff0c;中年危机可能更加明显。以下是一些应对中年危机的建议&#xff1a; 持续学习新技术和工具&#xff1a;计算机技术发展迅速&…

特殊类的设计(含单例模式)

文章目录 一、设计一个不能被拷贝的类二、设计一个只能在堆上创建的类三、设计一个只能在栈上创建的类四、设计一个不能被继承的类五、单例模式1.懒汉模式2.饿汉模式 一、设计一个不能被拷贝的类 拷贝只会放生在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xf…

MySQL介绍、安装和卸载

MySQL介绍、安装和卸载 1. 数据库基本概念2. 数据库类型和常见的关系型数据库2.1 数据库类型2.2 常见的关系型数据库 3. MySQL介绍4. MySQL8的安装和卸载 1. 数据库基本概念 1. 数据 所谓数据&#xff08;Data&#xff09;是指对客观事物进行描述并可以鉴别的符号&#xff0c;…

(四)流程控制ifelse

文章目录 if else用法示例1演示1示例2演示2示例3演示3示例4演示4 逻辑与或非示例1演示1示例2演示2示例3演示3 if elseif else示例1演示1示例2演示2 if else 用法 if(条件表达式成立或为真){ //执行里面 }else{ //否则执行这里面 } 这里:条件表达式成立或为真&#xff0c;数值…

《WebKit 技术内幕》学习之十五(6):Web前端的未来

6 Chromium OS和Chrome的Web应用 6.1 基本原理 HTML5技术已经不仅仅用来编写网页了&#xff0c;也可以用来实现Web应用。传统的操作系统支持本地应用&#xff0c;那么是否可以有专门的操作系统来支持Web应用呢&#xff1f;当然&#xff0c;现在已经有众多基于Web的操作系统&…

环形链表的检测与返回

环形链表 王赫辰/c语言 - Gitee.com 快慢指针的差距可以为除一以外的数吗&#xff1f;不可以如果差奇数则无法发现偶数环&#xff0c;是偶数无法发现奇数环&#xff0c;本题思路为指针相遇则为环&#xff0c;而以上两种情况会稳定差一&#xff0c;导致指针永不相遇 最终返回…

<蓝桥杯软件赛>零基础备赛20周--第19周--最短路

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…

单片机学习笔记---独立按键控制LED亮灭

直接进入正题&#xff01; 今天开始我们要学习一个新的模块&#xff1a;独立按键&#xff01; 先说独立按键的内部结构&#xff1a; 它相当于一种电子开关&#xff0c;按下时开关接通&#xff0c;松开时开关断开&#xff0c;实现原理是通过轻触按键内部的金属弹片受力弹动来实…

深度学习知识

context阶段和generation阶段的不同 context阶段&#xff08;又称 Encoder&#xff09;主要对输入编码&#xff0c;产生 CacheKV(CacheKV 实际上记录的是 Transformer 中 Attention 模块中 Key 和 Value 的值&#xff09;&#xff0c;在计算完 logits 之后会接一个Sampling 采…

CC++内存管理【非常详细,对新手友好】

文章目录 一、程序内存划分1.基础知识2. 堆栈的区别3. 题目练手 二、C语言中动态内存管理方式三、C中动态内存管理方式1. new/delete操作内置类型2. new/delete操作自定义类型 四、operator new和operator delete函数1. 汇编查看编译器底层调用2. 透过源码分析两个全局函数 五、…