当前位置：首页 > news >正文

vue2集成可在线编辑的思维导图（simple-mind-map）

news 来源：原创 2025/8/11 6:52:55

最近要求做一个可在线编辑的思维导图，经过层层调研和实测，最简单的思维导图导图实现还得是simple-mind-map组件

simple-mind-map中文文档
当前我使用的是vue2项目，目前没试过是否支持vue3，但是看官网描述他们也给了有vue3的demo项目

集成方式

1.node版本：16.20.2（官方使用的版本是14）
2.执行：npm i simple-mind-map
3.看图片描述
transpileDependencies: [‘simple-mind-map’]
在这里插入图片描述
到这里集成结束

实现代码

<template><div class="flow-chart-container"><div id="mindMapContainer"></div><!-- 右键菜单 --><divclass="context-menu"v-show="show":style="{ left: left + 'px', top: top + 'px' }"><div class="menu-item" @click="insertChild" v-if="type === 'node'">插入子节点</div><divclass="menu-item"@click="insertSibling"v-if="type === 'node' && !isRoot">插入同级节点</div><divclass="menu-item"@click="insertParent"v-if="type === 'node' && !isRoot">插入父节点</div><divclass="menu-item"@click="deleteNode"v-if="type === 'node' && !isRoot">删除节点</div><divclass="menu-item"@click="moveUp"v-if="type === 'node' && !isRoot && !isFirst">上移节点</div><divclass="menu-item"@click="moveDown"v-if="type === 'node' && !isRoot && !isLast">下移节点</div></div></div>
</template><script>
import MindMap from "simple-mind-map";
export default {name: "FlowChart",data() {return {mindMap: null,// 右键菜单相关数据type: "", // 当前右键点击的类型currentNode: null, // 当前右键点击的节点left: 0, // 菜单显示的位置top: 0,show: false, // 是否显示菜单isRoot: false, // 是否是根节点isFirst: false, // 是否是同级第一个节点isLast: false, // 是否是同级最后一个节点};},mounted() {this.mindMap = new MindMap({el: document.getElementById("mindMapContainer"),enableFreeDrag: true,data: {data: {text: "根节点",},children: [],},});// 监听节点右键事件this.mindMap.on("node_contextmenu", (e, node) => {e.preventDefault();this.type = "node";this.left = e.clientX + 10;this.top = e.clientY + 10;this.show = true;this.currentNode = node;// 判断节点类型this.isRoot = node.isRoot;if (!this.isRoot) {const siblings = node.parent.children;this.isFirst = siblings[0] === node;this.isLast = siblings[siblings.length - 1] === node;}});// 点击其他区域隐藏菜单this.mindMap.on("node_click", this.hideMenu);this.mindMap.on("draw_click", this.hideMenu);},methods: {// 隐藏菜单hideMenu() {this.show = false;this.left = 0;this.top = 0;this.type = "";this.currentNode = null;},// 插入子节点insertChild() {console.log("插入子节点");this.mindMap.execCommand("INSERT_CHILD_NODE", this.currentNode);this.hideMenu();},// 插入同级节点insertSibling() {this.mindMap.execCommand("INSERT_NODE", this.currentNode);this.hideMenu();},// 插入父节点insertParent() {this.mindMap.execCommand("INSERT_PARENT_NODE", this.currentNode);this.hideMenu();},// 删除节点deleteNode() {this.mindMap.execCommand("REMOVE_NODE", this.currentNode);this.hideMenu();},// 上移节点moveUp() {this.mindMap.execCommand("UP_NODE", this.currentNode);this.hideMenu();},// 下移节点moveDown() {this.mindMap.execCommand("DOWN_NODE", this.currentNode);this.hideMenu();},},
};
</script><style lang="scss" scoped>
#mindMapContainer {width: 100%;height: 100%;
}
#mindMapContainer * {margin: 0;padding: 0;
}.flow-chart-container {width: 100%;height: 100vh;position: relative;overflow: hidden;
}.context-menu {position: fixed;background: #fff;border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);padding: 5px 0;z-index: 1000;.menu-item {padding: 7px 16px;cursor: pointer;font-size: 14px;color: #333;transition: all 0.3s;&:hover {background: #f5f5f5;}}
}
</style>

至于导出和导入就自己照着官网加吧，我用不到就不加了

vue2集成可在线编辑的思维导图（simple-mind-map）

最近要求做一个可在线编辑的思维导图，经过层层调研和实测，最简单的思维导图导图实现还得是simple-mind-map组件 simple-mind-map中文文档当前我使用的是vue2项目，目前没试过是否支持vue3，但是看官网描述他们也给了有vue3的demo项…...

编程日记 2025/8/11 6:52:55

【开源Agent框架】CAMEL：角色扮演+任务分解

一、项目概览：重新定义智能体协作范式 CAMEL（Communicative Agents for “Mind” Exploration of Large Language Model Society）是由camel-ai社区开发的开源多智能体框架，致力于探索智能体的规模法则（Scaling Laws）。该项目通过构建包含百万级智能体的复杂社会系统，研…...

编程日记 2025/8/11 6:47:49

Elasticsearch-kibana索引操作

1索引模版添加索引 PUT /_index_template/account_transaction {"priority": 0,"index_patterns": ["account_transaction*"],"template": {"settings": {"index": {"number_of_shards": "50&q…...

编程日记 2025/8/11 6:47:48

一、读取文件 pi_digits.txt3.1415926535897932384626433832791.读取文件的全部内容 # file_reader.pyfrom pathlib import Pathpath Path("pi_digits.txt") contents path.read_text() print(contents)2.相对文件路径和绝对文件路径当相对路径行不通时&#x…...

编程日记 2025/8/7 5:31:22

Reactive与Ref的故事

Vue 3的两位"响应式英雄"：Reactive与Ref的故事基本介绍：响应式的两种武器 Vue 3提供了两种创建响应式数据的主要API：reactive()和ref()。它们像两种不同的魔法工具，各有所长，共同构建Vue的响应式王国。 ┌────────────────────────…...

编程日记 2025/8/11 6:50:17

基于Scrapy-Redis的分布式景点数据爬取与热力图生成

1. 引言在旅游行业和城市规划中，热门景点的数据分析具有重要意义。通过爬取景点数据并生成热力图，可以直观展示游客分布、热门区域及人流趋势，为商业决策、景区管理及智慧城市建设提供数据支持。然而，单机爬虫在面对大规模数据…...

编程日记 2025/8/11 6:50:16

MySQL数据库——支持远程IP访问的设置方法总结

【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！ 《项目案例分享》《极客DIY开源分享》《嵌入式通用开发实战》《C语言开发基础总结》《从0到1学习嵌入式Linux开发》《QT开发实战》《Android开发实…...

编程日记 2025/8/11 6:52:33

现在环保方面有什么新的技术动态

环保领域的技术发展迅速，尤其在“双碳”目标、数字化转型和可持续发展背景下，涌现出许多创新技术和应用。以下是当前环保领域的新技术动态（截至2024年）： 一、碳中和与碳减排技术 CCUS（碳捕集、利用与封存&a…...

编程日记 2025/7/14 17:30:13

[模型部署] 1. 模型导出

👋 你好！这里有实用干货与深度分享✨✨ 若有帮助，欢迎： 👍 点赞 | ⭐ 收藏 | 💬 评论 | ➕ 关注 ，解锁更多精彩！ 📁 收藏专栏即可第一时间获取最新推送🔔…...

编程日记 2025/8/11 6:47:46

Neo4j 图书馆借阅系统知识图谱设计

一、数据模型设计节点类型读者(Reader) 属性: reader_id, name, age, gender, phone, email, register_date 图书(Book) 属性: book_id, title, author, publisher, publish_date, isbn, price, category 图书副本(BookCopy) 属性: copy_id, status (在馆/借出/维修), loca…...

编程日记 2025/8/11 6:47:48

android 安装openwrt 安正步骤

安装 QEMU 模拟器 bash 复制编辑 pkg install wget pkg install qemu-utils pkg install qemu-system-aarch64-headless 可选 x86 模拟支持： bash 复制编辑 pkg install qemu-system-x86-64-headless ✅ 下载 OpenWRT 镜像（armvirt 64） bash 复制编辑 mkdir -p ~/openwr…...

编程日记 2025/8/11 6:47:47

大规模CFD仿真计算中，SIMPLE或者PISO算法中加速压力场方程迭代求解

文章目录在SIMSOL或PISO算法中加速压力场方程的迭代求解是提高CFD计算效率的关键。以下从算法优化、数值技巧和并行计算等方面总结加速策略：**1. 压力方程求解器的选择与优化****2. 算法层面的加速****3. 离散格式与网格优化****4. 并行计算与硬件加速****5. 代码级…...

编程日记 2025/8/8 1:31:07

【C#】 lock 关键字

在 C# 里，lock 关键字就是对 Monitor.Enter/Exit 的简写。它的作用是保证“同一时刻只有一个线程能进入被保护的代码块”，从而避免多个线程同时修改同一个共享状态导致竞态条件（race condition）。一、结合Jog 的例子讲解 // Mot…...

编程日记 2025/8/11 6:50:17

前端脚手架开发指南：提高开发效率的核心操作

前端脚手架通过自动化的方式可以提高开发效率并减少重复工作，而最强大的脚手架并不是现成的那些工具而是属于你自己团队量身定制的脚手架！本篇文章将带你了解脚手架开发的基本技巧，帮助你掌握如何构建适合自己需求的工具，并带着你…...

编程日记 2025/8/9 15:18:58

职坐标AIoT技能培训课程实战解析

职坐标AIoT技能培训课程以人工智能与物联网技术深度融合为核心，构建了“理论实战行业应用”三位一体的教学体系。课程体系覆盖Python编程基础、传感器数据采集、边缘计算开发、云端服务部署及智能硬件开发全链路，通过分层递进的知识模块帮助学员建立系统…...

编程日记 2025/8/10 22:22:34

Yocto Project 快速构建

此文为机器辅助翻译，仅供个人学习使用，如有翻译不当之处欢迎指正 1 Yocto 项目快速构建 1.1 欢迎！ 本简短文档将引导您完成使用 Yocto Project 进行典型镜像构建的流程，并介绍如何为特定硬件配置构建环境。您将使用 Yocto Proj…...

编程日记 2025/8/7 20:48:17

git相关配置

git相关配置欢迎使用Markdown编辑器修改Git默认编辑器为vimgit配置默认用户名和密码： 欢迎使用Markdown编辑器修改Git默认编辑器为vim #方法1：直接执行 git config --global core.editor vim#方法2：修改git的配置文件.git/config文件&am…...

编程日记 2025/8/10 1:36:13

ci/cd全流程实操

本次采用架构，gitlab + jenkins + 镜像仓库+ k8s 准备工作一、gitlab部署拉取镜像部署环境： macbook m2中docker部署gitlab （m2平台架构问题，这里只能用yrzr/gitlab-ce-arm64v8 这个容器镜像） docker pull yrzr/gitlab-ce-arm64v8 在 Docker 里，–privileged=tr…...

编程日记 2025/8/8 15:31:30

Python中in和is关键字详解和使用

在 Python 中，in 和 is 是两个常用但含义不同的关键字，初学者很容易混淆它们的用法。下面是关于它们的详细解释、注意事项及常见示例。一、关键字 in：成员运算符 1. 功能用于判断某个元素是否存在于序列（如列表、元组、字符串…...

编程日记 2025/8/10 13:48:27

ACM模式用Scanner和System.out超时的解决方案和原理

Hi~！这里是奋斗的明志，很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~~ 🌱🌱个人主页：奋斗的明志 🌱🌱所属专栏：笔试强训 📚本系列文章为个人学…...

编程日记 2025/8/7 22:59:05

微服务中服务降级和异常的区别

在Java中，服务降级和异常处理是两个相关但不同的概念。它们的主要区别如下： 1. 服务降级（Service Degradation）: 定义：服务降级是指在系统中某个服务或功能出现问题时，通过采取某些策略来降低服务的质量或…...

编程日记 2025/8/8 15:31:25

MYSQL创建索引的原则

创建索引的原则包括： 表中的数据量超过10万以上时考虑创建索引。选择查询频繁的字段作为索引，如查询条件、排序字段或分组字段。尽量使用复合索引，覆盖SQL的返回值。如果字段区分度不高，可以将其放在组合索引的后面。对于…...

编程日记 2025/8/9 18:43:59

29、魔法微前端——React 19 模块化架构

一、时空结界分割术（模块化架构设计） 1. 次元切割协议 // 主应用入口const HogwartsMain () > {const [subApps] useState({potion: React.lazy(() > import(./PotionShop)),library: React.lazy(() > import(./LibraryApp)),quidditch: R…...

编程日记 2025/8/7 20:01:43

【PmHub后端篇】PmHub 中缓存与数据库一致性的实现方案及分析

在软件开发项目中，缓存的使用十分普遍。缓存作为一种存储机制，能够暂时保存数据，从而加速数据的读取和访问。然而，当数据同时存在于缓存和数据库中时，如何保证两者的数据一致性成为了一个关键问题。在 PmHub 项目中&am…...

编程日记 2025/8/8 11:06:08

Verilog HDL 语言整理

Verilog HDL 语言 Verilog HDL 简介硬件描述语言Hardware Description Language是一种用形式化方法即文本形式来描述和设计数字电路和数字系统的高级模块化语言 Verilog HDL（Hardware Description Language）是一种硬件描述语言，用于建模…...

编程日记 2025/8/8 7:24:27

[250516] OpenAI 升级 ChatGPT：GPT-4.1 及 Mini 版上线！

目录 ChatGPT 迎来重要更新：GPT-4.1 和 GPT-4.1 mini 正式上线用户如何访问新模型？技术亮点与用户体验优化 ChatGPT 迎来重要更新：GPT-4.1 和 GPT-4.1 mini 正式上线 OpenAI 宣布在 ChatGPT 平台正式推出其最新的 AI 模型 GPT-4.1 和 GPT-4.…...

编程日记 2025/8/11 0:46:11

R语言学习--Day03--数据清洗技巧

在一般情况下，我们都是在数据分析的需求前提下去选择使用R语言。而实际上，数据分析里，百分之八十的工作，都是在数据清洗。并不只是我们平时会提到的异常值处理或者是整合格式，更多会涉及到将各种各样的数据整合&#x…...

编程日记 2025/8/9 17:28:08

文件系统交互实现

关于之前的搭建看QT控件文件系统的实现-CSDN博客，接下来是对本程序的功能完善，我想着是这样设计的，打开一个目录以后，鼠标选中一个项可以是目录，也可以是文件，右键可以出现一个菜单选择操作，比如…...

编程日记 2025/8/8 15:31:12

SqlHelper 实现类，支持多数据库，提供异步操作、自动重试、事务、存储过程、分页、缓存等功能。

/// <summary> /// SqlHelper 实现类，支持多数据库，提供异步操作、自动重试、事务、存储过程、分页、缓存等功能。 /// </summary> public class SqlHelper : IDbHelper {private readonly IDbConnectionFactory _connectionFactory;private…...

编程日记 2025/8/10 4:43:56

DevExpressWinForms-RichEditControl-基础应用

RichEditControl-基础应用在企业级WinForms应用开发中，富文本编辑与文档处理是常见需求。DevExpress WinForms的RichEditControl作为一款功能强大的富文本编辑控件，提供了媲美Microsoft Word的文档处理能力，支持复杂格式编辑、打印导出、界…...

编程日记 2025/8/7 21:22:07

Elasticsearch 索引副本数

作者：来自 Elastic Kofi Bartlett 解释如何配置 number_of_replicas、它的影响以及最佳实践。更多阅读：Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica 想获得 Elastic 认证？查看下一期 Elasticsearc…...

编程日记 2025/8/7 20:16:47

RabbitMQ 扇形交换器工作原理详解

目录一、扇形交换器简介二、扇形交换器工作原理2.1 消息广播机制2.2 路由键的忽略三、代码示例3.1 生产者代码3.2 消费者代码四、实际应用场景4.1 日志收集系统4.2 实时通知系统4.3 事件驱动架构五、总结在 RabbitMQ 的众多交换器类型中，扇形交换器（Fanout Exchange）是一种…...

编程日记 2025/7/24 1:34:09

IDEA中springboot项目中连接docker

具体内容如下： 1、在Linux中安装docker 使用安装命令： apt-get install docker.io 还有一个是更新软件并安装docker： sudo apt-get update sudo apt-get install docker-ce docker-ce-cli containerd.io 运行docker systemctl start …...

编程日记 2025/8/10 20:21:17

arxiv等开源外文书数据的获取方式

一、一些基本说明开放API接口文档：https://info.arxiv.org/help/api/user-manual.html#2-api-quickstart研究领域分类说明文档：https://arxiv.org/category_taxonomy 二、基于url接口方式检索并获取数据本质是get方式，在url中传检索参数…...

编程日记 2025/8/8 15:04:43

ChatGPT再升级！

近日，OpenAI 正式发布 GPT-4.1 和轻量级版本 GPT-4.1mini，并已全面上线 ChatGPT 平台，迅速引发全球 AI 圈热议，标志着 ChatGPT 在智能化和效率上再登新高峰。 GPT-4.1 是为编程与任务处理优化的高性能模型。相较前作 GPT-4o&#…...

编程日记 2025/7/14 21:35:32

23、电网数据管理与智能分析 - 负载预测模拟 - /能源管理组件/grid-data-smart-analysis

76个工业组件库示例汇总电网数据管理与智能分析组件 1. 组件概述本组件旨在模拟一个城市配电网的运行状态，重点关注数据管理、可视化以及基于模拟数据的智能分析，特别是负载预测功能。用户可以通过界面交互式地探索电网拓扑、查看节点状态、控制时间…...

编程日记 2025/8/10 0:02:37

#跟着若城学鸿蒙# web篇-获取定位

前言在业务中，某些网页上需要获取用户的地理位置，然后按照用户搜索的兴趣点与用户的距离远近进行排序，这就需要h5能够获取到用户的位置。由于 web 组件基于Chromium M114 版本开发，前端就可以使用navigator.geolocation.getC…...

编程日记 2025/8/8 19:28:42

前端批量下载文件打包为zip

多文件需要一次性下载为zip文件这是近期遇到的一个需求，本身是多文件上传的，下载时单个下载太慢又繁杂，用户希望能一次性批量下载，就选择了jszip import axios from "axios" import JSZip from "jszip" im…...

编程日记 2025/8/7 16:30:13

Vue百日学习计划Day9-15天详细计划-Gemini版

重要提示： 番茄时钟： 每个番茄钟为25分钟学习，之后休息5分钟。每完成4个番茄钟，进行一次15-30分钟的长休息。灵活性： JavaScript 的概念较多，尤其是 this、原型链、闭包和异步编程，可能需要更多…...

编程日记 2025/8/11 2:35:47

MySQL8.x新特性：与mysql5.x的版本区别

MySQL8.x新特性 1.与mysql5.x的区别：MySQL8.x新特性：与mysql5.x的版本区别-CSDN博客 2.窗口函数（Window Functions）：MySQL8.x新特性：窗口函数（Window Functions）-CSDN博客引言 …...

编程日记 2025/8/9 5:51:33

RabbitMQ 消息模式实战：从简单队列到复杂路由（三）

精准投递：路由模式路由模式详解路由模式是 RabbitMQ 中一种功能强大且灵活的消息传递模式，它在发布订阅模式的基础上，引入了路由键（Routing Key）的概念，实现了消息的精准路由和分发。在路由模式中&…...

编程日记 2025/7/14 21:35:20

STM32 定时器主从模式配置解析

STM32 定时器主从模式配置解析下面这两行代码是配置STM32定时器主从模式的关键设置代码功能解析 TIM_SelectInputTrigger(TIM3, TIM_TS_TI2FP2); // 选择从模式输出的触发源 TIM_SelectSlaveMode(TIM3, TIM_SlaveMode_Reset); // 选择从模式1. TIM_SelectInputTrigger(T…...

编程日记 2025/8/10 4:44:08

Leetcode76覆盖最小子串

覆盖最小子串代码来自b站左程云 class Solution {public String minWindow(String str, String tar) {char[] s str.toCharArray();char[] t tar.toCharArray();int[] cnt new int[256];for (char cha : t) { cnt[cha]--;}int len Integer.MAX_VALUE;int debt t.length…...

编程日记 2025/8/7 17:13:17

Perl语言深度考查：从文本处理到正则表达式的全面掌握

阅读原文前言：为什么Perl依然值得学习？ "这个脚本用Perl写只需要5分钟！"——在当今Python大行其道的时代，你依然能在不少企业的运维部门听到这样的对话。Perl作为一门有着30多年历史的语言，凭借其强大的文…...

编程日记 2025/7/21 0:55:27

idea中Lombok失效的解决方案

Lombok 是一个 Java 库，旨在通过注解简化 Java 代码的编写，减少样板代码，提高开发效率。它通过自动生成常见的代码（如 getter、setter、构造函数等）来减少开发者的手动编码工作。一般Lombok失效有四步排查方案&#…...

编程日记 2025/7/14 21:35:12

【LeetCode 热题 100】动态规划系列

📁 70. 爬楼梯状态标识：爬到第i层楼梯时，有多少种方法。状态转移方程：dp[i] dp[i-1] dp[i-2]，表示从走一步和走两步的方式。初始化：dp[1] 1 , dp[2] 2。返回值：dp[n]，即走到…...

编程日记 2025/8/8 19:28:46

刷leetcodehot100返航版--双指针5/16

for (int i 0, j 0; i < n; i ) { while (j < i && check(i, j)) j ; // 具体问题的逻辑 } 常见问题分类： (1) 对于一个序列，用两个指针维护一段区间 (2) 对于两个序列，维护某种次序，比如归并排序中…...

编程日记 2025/8/10 1:23:20

DAY24元组和OS模块

元组元组的特点： 有序，可以重复，这一点和列表一样元组中的元素不能修改，这一点非常重要，深度学习场景中很多参数、形状定义好了确保后续不能被修改。很多流行的 ML/DL 库（如 TensorFlow, PyTorch, Num…...

编程日记 2025/8/9 1:23:53

CSS：三大特性

文章目录一、层叠性二、继承性三、优先级一、层叠性二、继承性可以在MDN网站上查看属性是否可以被继承例如color 三、优先级...

编程日记 2025/8/10 18:16:50

Cross-Site Scripting（XSS）

1. XSS介绍跨站脚本攻击（Cross-Site Scripting）简称XSS，人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩…...

编程日记 2025/8/11 5:47:19

最近要求做一个可在线编辑的思维导图，经过层层调研和实测，最简单的思维导图导图实现还得是simple-mind-map组件

集成方式

实现代码

相关文章：