使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?
思维导图是一种流行的知识图谱工具,可以帮助我们更好地组织和理解复杂的思维关系。在开发基于Vue的思维导图应用时,实现历史版本控制和撤销/重做功能是非常有用的。以下为您介绍如何使用Vue和jsmind插件来实现这些功能。
安装依赖
 首先,我们需要安装Vue和jsmind的依赖包。可以使用npm或者yarn来完成安装。
npm install vue jsmind 
2,创建一个Vue组件
 接下来,我们需要创建一个Vue组件来管理思维导图及其版本历史。在组件中,我们将使用jsmind来渲染思维导图,并使用Vue的数据绑定来实现版本控制和撤销/重做功能。以下是一个简单的组件示例:
<template><div><div ref="jsmindContainer"></div><button @click="undo">撤销</button><button @click="redo">重做</button></div>
</template><script>
import 'jsmind/style/jsmind.css'
import { jsMind } from 'jsmind'export default {name: 'MindMap',data () {return {mindMap: null,history: [],current: -1}},mounted () {const options = {container: this.$refs.jsmindContainer,editable: true}this.mindMap = new jsMind(options)this.mindMap.set_data(this.history[this.current])},methods: {undo () {if (this.current > 0) {this.current--this.mindMap.set_data(this.history[this.current])}},redo () {if (this.current < this.history.length - 1) {this.current++this.mindMap.set_data(this.history[this.current])}},saveData () {const data = this.mindMap.get_data()this.history = this.history.slice(0, this.current + 1)this.history.push(data)this.current = this.history.length - 1}},watch: {mindMap: {handler: 'saveData',deep: true}}
}
</script> 
在以上代码中,我们引入了jsmind的样式文件和jsMind实例。在data中,我们定义了mindMap用来管理思维导图,history用来保存版本历史,current表示当前版本的索引。
在组件的mounted方法中,我们通过jsMind的构造函数来创建一个思维导图实例,并将其渲染到指定的DOM节点中。在methods中,我们实现了undo和redo两个方法来撤销和重做思维导图的版本。在saveData方法中,我们将当前的思维导图数据保存到history中,并更新current的值。
最后,在watch中,我们监听mindMap的变化,以便在思维导图数据发生改变时调用saveData方法进行保存。
3,使用组件
 现在,我们可以在我们的Vue应用中使用我们创建的组件了。只需将MindMap组件添加到Vue应用的模板中即可。
<template><div><MindMap /></div>
</template><script>
import MindMap from './MindMap.vue'export default {name: 'App',components: {MindMap}
}
</script> 
您可以根据自己的需要进一步扩展这个组件,例如添加历史版本的显示等。
总结
 使用Vue和jsmind插件,我们可以轻松地实现思维导图的历史版本控制和撤销/重做功能。通过监视思维导图的变化并保存数据,我们可以构建一个灵活且易于使用的思维导图应用。希望这篇文章能够对您有所帮助!
相关文章:
使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?
思维导图是一种流行的知识图谱工具,可以帮助我们更好地组织和理解复杂的思维关系。在开发基于Vue的思维导图应用时,实现历史版本控制和撤销/重做功能是非常有用的。以下为您介绍如何使用Vue和jsmind插件来实现这些功能。 安装依赖 首先,我们…...
【Vue-Router】路由元信息
路由元信息(Route Meta Information)是在路由配置中为每个路由定义的一组自定义数据。这些数据可以包含任何你希望在路由中传递和使用的信息,比如权限、页面标题、布局设置等。Vue Router 允许你在路由配置中定义元信息,然后在组件…...
vue 控件的四个角设置 父视图position:relative
父视图relative,子视图 absolute <div class"bg1"> <i class"topL"></i> <i class"topR"></i> <i class"bottomL"></i> <i class"bottomR"></i> <di…...
VM中linux虚拟机配置桥接模式(虚拟机与宿主机网络互通)
VM虚拟机配置桥接模式,可以让虚拟机和物理主机一样存在于局域网中,可以和主机相通,和互联网相通,和局域网中其它主机相通。 vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式&…...
7.Eclipse中改变编码方式及解决部分乱码问题
1、改变整个工作空间的编码方式: 点击Window->Preference->General->workplace,然后选择默认编码方式 2、改变某个项目的编码方式: 右键点击项目名->Properties>Resource,然后选择默认编码方式。 问题ÿ…...
grafana 的 ws websocket 连接不上的解决方式
使用了多层的代理方式,一层没有此问题 错误 WebSocket connection to ‘wss://ip地址/grafana01/api/live/ws’ failed: 日志报错 msg“Request Completed” methodGET path/api/live/ws status403 解决方式 # allowed_origins is a comma-separated list of o…...
多环境_部署项目
多环境: 指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。 为什么需要? 1. 每个环境互不影响 2. 区分不同的阶段:开发 / 测试 / 生产 3. 对项目进行优化: 1. 本地日志级别 2. 精简依赖&a…...
go web框架 gin-gonic源码解读02————router
go web框架 gin-gonic源码解读02————router 本来想先写context,但是发现context能简单讲讲的东西不多,就准备直接和router合在一起讲好了 router是web服务的路由,是指讲来自客户端的http请求与服务器端的处理逻辑或者资源相映射的机制。&…...
【Java后端封装数据】常见后端封装数据的格式,用于返回给前端使用(109)
数据格式一:包装 List Map 返回,常用于数据展示; // Controller:public Result selectRegConfig(RequestBody String param) {try {Map<String, Object> paramMap JsonUtils.readValue(param, Map.class);return Result.su…...
无脑入门pytorch系列(三)—— nn.Linear
本系列教程适用于没有任何pytorch的同学(简单的python语法还是要的),从代码的表层出发挖掘代码的深层含义,理解具体的意思和内涵。pytorch的很多函数看着非常简单,但是其中包含了很多内容,不了解其中的意思…...
SQL Server用sql语句添加列,添加列注释
SQL Server用sql语句添加列,添加列注释 微软文档: https://learn.microsoft.com/zh-cn/sql/relational-databases/tables/add-columns-to-a-table-database-engine?viewsql-server-ver15 alter table article add RedirectURL varchar(600) nu…...
springBoot中service层查询使用多线程CompletableFuture(有返回值)
重点: 1. 创建线程池 Executor executor Executors.newCachedThreadPool();//保存线程List<CompletableFuture<Void>> futures new ArrayList<>();2.使用 //这里可以是多个看下面代码是在for中使用的 CompletableFuture<Void> future …...
畜牧虚拟仿真 | 鱼授精过程VR模拟演练系统
随着科技的发展,虚拟现实(VR)技术逐渐渗透到各个领域,为人们提供了更加真实、直观的体验。在动物养殖教育领域,鱼授精过程VR模拟演练系统正成为一种新的教学手段,它能够帮助人们更好地理解和掌握鱼授精的操作技巧,从而…...
第一百一十四回 局部动态列表
文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了dart语言中的 setter/getter相关的内容,本章回中将介绍 局部动态列表.闲话休提,让我们一起Talk Flutter吧。 概念介绍 在正常情况下列表位于整个页面中,而且可以在整个页面中滚动…...
多尺度目标检测【动手学深度学习】
在上篇博客《锚框【目标检测】》中,我们以输入图像的每个像素为中心,生成多个锚框。基本而言,这些锚框代表了图像不同区域的样本。然而如果以每个像素都生成的锚框,最后可能会得到太多需要计算的锚框。想象一个561728的输入图像,如果以每个像素为中心生成五个形状不同的锚…...
elasticsearch 基础
ES 搜索技术历史 今天看的是《Elasticsearch实战与原理解析》 第一章 搜索技术发展史 1、搜索技术发展史 宏观而言,搜索引擎的发展经历了五个尖端和两大分类。五个阶段分别是ftp文件检索阶段、分类目录阶段、文本相关性检索阶段、网页链接分析阶段和用户意图识别…...
【BUG】docker安装nacos,浏览器却无法访问到页面
个人主页:金鳞踏雨 个人简介:大家好,我是金鳞,一个初出茅庐的Java小白 目前状况:22届普通本科毕业生,几经波折了,现在任职于一家国内大型知名日化公司,从事Java开发工作 我的博客&am…...
C#引用Web Service 类型方法,添加搜索本地服务器Web Service 接口调用方法
首先保证现在网络能调用web service接口,右键项目添加服务引用  点击高级 添加web服务 输入搜索的服务器接口,选中你要添加调用的方法即可 添加完成调用方…...
yolov8训练进阶:新增配置参数
续yolov8训练进阶:自定义训练脚本,从配置文件载入训练超参数_CodingInCV的博客-CSDN博客 尽管yolov8有很多参数可以设置,但难免我们训练过程中会需要增加自己的参数,如新的数据增强、自定义的一些条件。那么在yolov8中如何实现呢&…...
轻量级自动化测试框架WebZ
一、什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架,基于WebDriver。 设计该框架的初衷是:用自动化测试让测试人员从一些简单却重复的测试中解放出来。之所以用“关键字驱动”模式是因为我觉得这样能让测试人员(测试执行人员…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
