vue3使用@antv/x6-边工具的右键菜单实现

官方文档是react实现的,但项目里使用的vue3+elementPlus,经过研究后通过以下方式实现:

  1. 在根目录的index.html里添加右键菜单的元素
<body>
<!-- 模型的自定义工具容器 -->
+ <div id="graph-dropdown"></div>
<div id="app"><div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div class="load_title">正在加载系统资源,请耐心等待</div></div>
</div>

还有该元素的css属性

#graph-dropdown {position: absolute;z-index: 2;background-color: #fff;top: 0;left: 0;
}
  1. 定义工具类
    contextMenuTool.jsx
import { ElDropdown, ElButton } from 'element-plus'
import { ToolsView } from '@antv/x6'
import { createApp } from 'vue'// ContextMenu挂载的Vue实例
let app = null;
let timer = null; // timerclass ContextMenuTool extends ToolsView.ToolItem {toggleContextMenu(visible, pos) {if (app) {// 清空上次内容app.unmount();document.getElementById('graph-dropdown').innerHTML = '';app = null}document.removeEventListener('mousedown', this.onMouseDown)if (visible && pos) {app = createApp(<ElDropdowntrigger={['contextmenu']}>{{default: () => {// menu是在createEdge传入的argsif (Array.isArray(this.options.menu)) {return <div style="padding: 10px;">{this.options.menu.map(item => {return <ElButton style="margin-left: 0;display:block;border: 0;" icon={item.icon} onClick={item.onClick}>{ item.label }</ElButton>})}</div>}}}}</ElDropdown>)// 减去本身元素的宽高document.getElementById('graph-dropdown').style = `left: ${pos.x - 40}px;top: ${pos.y - 40}px;`app.mount('#graph-dropdown')document.addEventListener('mousedown', this.onMouseDown)}}onMouseDown = () => {timer = window.setTimeout(() => {this.toggleContextMenu(false)},200)}onContextMenu({ e }) {debuggerif (timer) {clearTimeout(timer)timer = 0}this.toggleContextMenu(true, { x: e.pageX, y: e.pageY })}delegateEvents() {this.cellView.on('cell:contextmenu', this.onContextMenu, this)return super.delegateEvents()}onRemove() {this.cellView.off('cell:contextmenu', this.onContextMenu, this)}
}ContextMenuTool.config({tagName: 'div',isSVGElement: false
})export {ContextMenuTool
}
  1. vue中使用
// 画布中自定义右键菜单工具的类
import { ContextMenuTool } from "../components/contextMenuTool"// 在初始化画布之前注册自定义工具
Graph.registerEdgeTool('contextmenu', ContextMenuTool, true)graph = new Graph({container: document.getElementById('container'),...GRAPH_CONFIG,connecting: { // 连线规则...CONNECTING_CONFIG,createEdge() {return new Shape.Edge({tools: [{name: 'contextmenu',args: {menu: [{ label: '删除连接线', onClick: () => console.log('删除'), icon: Delete },{ label: '对应关系', onClick: () => console.log('查看'), icon: Connection }]}}]})}}});

若是使用的其他ui框架,变更下拉菜单组件即可。

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

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

相关文章

Leetcode面试经典150_Q27移除元素

题目&#xff1a;给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组…

vue快速入门(十)v-bind动态属性绑定

注释很详细&#xff0c;直接上代码 上一篇 新增内容 图片切换逻辑动态绑定的完整写法与简写方法 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice…

Ceph常用命令总结

查看集群健康状态 ceph -s 集群状态总览ceph health detail 集群状态详情ceph df 查看集群容量及使用率 osd相关 ceph osd tree 查看osd树形图ceoh osd df 查看osd使用率ceph osd df | sort -nr -k17 | head 查看osd使用率排序ceph osd down <ids> [<ids>...] 将…

【SpringBoot整合系列】SpringBoot整合FastDFS(二)

目录 SpringBoot整合FastDFSJava客户端/依赖常用api接口解释1.uploadFile参数返回值 2.uploadSlaveFile参数返回值 3.getMetadata参数返回值 4.overwriteMetadata参数&#xff1a;返回值&#xff1a;无 5.mergeMetadata参数&#xff1a;返回值&#xff1a;无 6.queryFileInfo参…

Shoplazza闪耀Shoptalk 2024,新零售创新解决方案引领行业新篇章!

在近期举办的全球零售业瞩目盛事——Shoptalk 2024大会上,全球*的零售技术平台-店匠科技(Shoplazza)以其*的创新实力与前瞻的技术理念,成功吸引了与会者的广泛关注。此次盛会于3月17日至20日在拉斯维加斯曼德勒湾隆重举行,汇聚了逾万名行业精英。在这场零售业的盛大聚会上,Shop…

Unity开发一个FPS游戏之三

在前面的两篇博客中&#xff0c;我已实现了一个FPS游戏的大部分功能&#xff0c;包括了第一人称的主角运动控制&#xff0c;武器射击以及敌人的智能行为。这里我将继续完善这个游戏&#xff0c;包括以下几个方面&#xff1a; 增加一个真实的游戏场景&#xff0c;模拟一个废弃的…

WebAPI(一)之DOM操作元素属性和定时器

webAPI之DOM操作元素属性和定时器 介绍概念DOM 树DOM 节点document获取DOM对象操作元素内容操作元素属性常用属性修改控制样式属性操作表单元素属性自定义属性间歇函数今日单词了解 DOM 的结构并掌握其基本的操作,体验 DOM 的在开发中的作用 知道 EC

谷粒商城实战(011 业务-检索服务)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第173p-第p194的内容 介绍 这些过滤条件都可以写在must里&#xff0c;但是filter不参与评分&#xff0c;速度会快一些&#xff0c;所以一些分类等…

vue 的状态库管理

Vuex 和 Pinia 均是 Vue.js 的状态管理库&#xff0c;它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。 Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation、action 和 getter。其中&#xff0c;state 代表应用程序的状态数据&a…

GBase 8s Docker镜像说明

最后更新&#xff1a;2024-04-07 版本号使用&#xff1a; v8.8_3503x1 v8.8_3331x12 文件列表 Dockerfile FROM scratch ADD v8.8_3503x1_x64.tar.gz / EXPOSE 9088 CMD /start.sh注&#xff1a;不同数据库版本的ADD 文件名称不一样。 v8.8_3503x1_x64.tar.gz GBase 8s 数据…

深入探讨WebView的使用与后退键处理:实现无缝网页浏览体验

引言 在移动应用开发中&#xff0c;WebView作为一个强大的组件&#xff0c;为我们提供了将网页内容无缝嵌入原生应用程序的能力。它允许用户在不离开应用环境的情况下访问网页、在线内容或Web应用程序&#xff0c;极大地提升了用户体验的连贯性和便利性。然而&#xff0c;要充分…

docker自动化部署示例

前提 安装docker 、 docker-cpmpose、git、打包环境&#xff08;如meaven、jdk、node等&#xff09; 原理 git Dockerfile docker-compose 获取源码&#xff08;代码仓库&#xff09;获取可运行程序的镜像&#xff08;docker&#xff09;将打包后的程序放入镜像内&#xf…

AssetBundle打包

AssetBundle技术的概念 Unity的AssetBundle是一个资源压缩包&#xff0c;包含模型、贴图、预制体、声音甚至整个场景&#xff0c;可以在游戏运行时被加载。   AssetBundle自身保存着相互的依赖关系&#xff0c;压缩包可以使用LZMA和LZ4压缩算法&#xff0c;减少包大小&#x…

【学习】移动端App性能测试流程有哪些

移动端App性能测试是保证App性能表现的重要环节之一。随着移动设备的普及和移动互联网的发展&#xff0c;移动端App的性能测试变得越来越重要&#xff0c;通过科学合理的性能测试可以发现并解决潜在的性能问题优化App运行效果提高用户体验。性能测试旨在评估App在各种场景下的性…

基于视频监管与AI智能识别技术的水利河道综合治理解决方案

一、方案介绍 TSINGSEE青犀视频水利河道综合治理解决方案是依托视频AI智能分析技术&#xff0c;利用水质/水文等传感器、高清摄像机、水利球、无人机、无人船等感知设备实时采集数据&#xff0c;并与视频能力进行联动&#xff0c;达到智能预警的目的。 TSINGSEE青犀方案以信息…

Spring Cloud微服务入门(三)

服务注册与发现的概念 服务之间相互访问&#xff1a; 例如&#xff1a;用户中心与内容中心之间相互调用。 问题&#xff1a; 服务调用需要知道对方的服务地址&#xff0c;地址写在哪里&#xff1f; 如果服务是多个实例部署&#xff0c;该调用哪一个&#xff1f; 如果服务是多…

Jetpack Compose -> 状态机制的背后秘密

前言 上一章我们讲解了 Jetpack Compose 的无状态、状态提升、单向数据流 本章我们讲解下状态机制的背后秘密 List 前面我们讲过&#xff0c;通过 by mustableStateOf() 就可以被 Compose 自动订阅了&#xff1b;我们前面是通过 String 类型进行的自动订阅&#xff0c;那么换成…

【深度学习】YOLO-World: Real-Time Open-Vocabulary Object Detection,目标检测

介绍一个酷炫的目标检测方式&#xff1a; 论文&#xff1a;https://arxiv.org/abs/2401.17270 代码&#xff1a;https://github.com/AILab-CVC/YOLO-World 文章目录 摘要Introduction第2章 相关工作2.1 传统目标检测2.2 开放词汇目标检测 第3章 方法3.1 预训练公式&#xff1a…

Linux命令-dos2unix命令(将DOS格式文本文件转换成Unix格式)

说明 dos2unix命令 用来将DOS格式的文本文件转换成UNIX格式的&#xff08;DOS/MAC to UNIX text file format converter&#xff09;。DOS下的文本文件是以 \r\n 作为断行标志的&#xff0c;表示成十六进制就是0D0A。而Unix下的文本文件是以\n作为断行标志的&#xff0c;表示成…

vitepress系列-01-搭建笔记骨架

文章目录 搭建笔记骨架 搭建笔记骨架 环境依赖&#xff1a;Node.js 18 及以上版本。 项目创建-以macOS为例 # 1.创建空项目 mkdir vitepress-learn-notes# 2.进入 vitepress-learn-notes cd vitepress-learn-notes# 3. 初始化项目 pnpm init# 4.安装vitepress 根据自己电脑的安…