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

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.hqwc.cn/news/441172.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA 学习 面试(十一)常见设计模式

设计模式 ## 1、创建型模式 对象实例化的模式&#xff0c;创建型模式用于解耦对象的实例化过程。 单例模式&#xff1a;某个类智能有一个实例&#xff0c;提供一个全局的访问点。 工厂模式&#xff1a;一个工厂类根据传入的参量决定创建出哪一种产品类的实例。 抽象工厂模式&a…

Linux系统中Docker的安装及常用组件的安装

什么是Docker Docker是一个开源的应用容器引擎&#xff0c;它可以让开发者将应用程序及其依赖项打包到一个可移植的镜像中&#xff0c;并发布到任何流行的操作系统上。Docker使用沙箱机制来隔离容器&#xff0c;使其相互独立&#xff0c;并简化了应用程序的部署和管理。沙箱机…

推荐一款简单好用的数据库建模工具

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

市面上的小型办公室都是哪些人在租?

市面上的小型办公室&#xff0c;又称服务式办公室&#xff0c;是一种将传统的写字楼进行精装修&#xff0c;分割成若干个独立的小型办公空间&#xff0c;提供给不同的租户的新型办公模式。那么&#xff0c;市面上的小型办公室都是哪些人在租&#xff1f;本文将从租户的特点和需…

npm create vue3项目特别慢

问题&#xff1a;Vue CLI v5.0.8在配置了淘宝镜像的情况下&#xff0c;创建项目报Failed to check for updates&#xff0c;还特别慢&#xff0c;等了好久都创建不好 查看 npm config get registry更换npm镜像 npm config set registryhttps://registry.npmmirror.com这样创建…

Web11--Bootstrap

1、Bootstrap入门 1.1 Bootstrap简介 官网&#xff1a;Bootstrap中文网 1.2 Bootstrap引入 <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"…

Python中容器类型的数据

目录 序列 序列的索引操作 加和乘操作 切片操作 成员测试 列表 创建列表 追加元素 插入元素 替换元素 删除元素 元组 创建元组 元组拆包 集合 创建集合 修改集合 字典 创建字典 修改字典 访问字典视图 遍历字典 若我们想将多个数据打包并且统一管理&…

Java基于SpringBoot+Vue的电影影城管理系统,附源码,文档

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Unity 观察者模式(实例详解)

文章目录 简介示例1 - 简单的文本更新通知示例2 - 多观察者监听游戏分数变化示例3 - 事件系统实现观察者模式示例4 - 泛型观察者和可序列化的事件系统示例5 - 使用C#委托简化版 简介 在Unity中实现观察者模式&#xff0c;我们可以创建一个Subject&#xff08;目标/主题&#x…

【Linux】vim的简单使用

我们知道在Windows下的VS2019是一个集成开发环境&#xff0c;也就是说&#xff0c;集编辑&#xff0c;编译&#xff0c;调试等功能都放在了一起&#xff1b;但是在Linux下&#xff0c;这些步骤都是分开的&#xff0c;我们这篇博客就来说一说vim这个编辑器&#xff0c;它只有编辑…

HarmonyOS 鸿蒙驱动消息机制管理

驱动消息机制管理 使用场景 当用户态应用和内核态驱动需要交互时&#xff0c;可以使用HDF框架的消息机制来实现。 接口说明 消息机制的功能主要有以下两种&#xff1a; 用户态应用发送消息到驱动。 用户态应用接收驱动主动上报事件。 表1 消息机制接口 方法描述struct …

父元素flex:1 高度却被子元素撑开的问题

问题 当父元素设置了flex: 1; 的情况下&#xff0c;想在其中子元素超出父元素高度的情况下&#xff0c;产生滚动条&#xff0c;在父元素区域滚动。由于子元素高度不固定&#xff0c;故父元素设置为display: flex; flex-direction: column; 子元素设置flex: 1; overflow: auto;…