在vue2使用百度脑图的kityminder-core进行二次开发思维导图。未选中节点点击工具栏时想要给出提示

最新推荐文章于 2024-04-23 10:04:21 发布
最新推荐文章于 2024-04-23 10:04:21 发布
阅读量478 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zmj_qq/article/details/129305294
版权

需求描述

    当用户未选择节点时，点击文件菜单栏要给出错位提示

功能效果

 实现过程

file.js 文件 和kityminder.core,js文件 中的file文件部分都修改

1、在file.js文件找到queryValue部分，在获取节点时添加if判断，如果未选中节点则返回一个‘NULLNODE’字符串，如果选中节点，则返回该节点的文件数据。（kityminder.core.js文件对应部分也要修改)

 

 2、在fileBox.vue文件中，点击添加文件的菜单栏时，先判断当前是否选中节点，如果未选中就给出提示。

 

 

～Serendipity～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
kityminder-core:强大的脑图可视化工具
04-01
KityMinder核心 简介 KityMinder是一款强大的脑图可视化/编辑工具，由百度FEX团队开发并维护。 本仓库是KityMinder的核心实现部分： 包括脑图数据的可视化展示（Json格式） 包括强大的编辑功能的KityMinder编辑器请移步 不包含第三方格式（FreeMind，XMind，MindManager）的支持，可以加载来扩展第三方格式支持。 不包含文件存储的支持，需要自行实现存储。参照柯林斯中的开源的FIO +百度网盘方案进行实现。 使用 可以参考进行使用。 < div xss=removed> < / div > < script type = "text/javascript" src = "kityminder.core.min.js" > < / script > < script type = "text/javascript
在vue2使用百度脑图的kityminder-core进行二次开发思维导图。节点收起时显示子节点的数量
ZMJ_QQ的博客
03-02 1310
用户收起某节点后要展示出当前节点的子节点数量，当节点展开后不显示子节点数量。
在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令
ZMJ_QQ的博客
01-12 2452
最近在搞kityminder-core的思维导图，需要增加一个给节点添加文件的功能，一直在研究源码，发现都是通过执行命令的方式实现的。一直卡在新增命令的步骤，搞了好多天了今天找到了如何在源码里新增命令，怕之后忘记所以现在先来记录一下添加命令的步骤。等忙完了有空我再详细记录一下二次开发中的问题。
vue中使用百度脑图kityminder-core二次开发的实现
12-30
最近项目中要用到 脑图工具。 翻遍个大网站，找到 kityminder-core。 然后发现这货 年代久远，用的技术比较古董 虽然出自大厂，但是文档资料着实让人蛋疼 经过数小时的采坑，已经上岸，记录使用方法如下： 先安装模块： npm install kity kityminder-core -S 然后引用模块 import kity from 'kity' import kityminder from 'kityminder-core' 然后创建一个容器标签 然后创建脑图示例代码如下： this.km
在Vue2中使用百度脑图kityminder-core
Hgiao的博客
11-11 3218
第一步：安装模板 npm install kity kityminder-core -S 第二步：在局部导入 import kity from "kity"; import kityminder from "kityminder-core"; 第三步：创建一个容器 <template> <div> <div style="width: 600px; height: 400px" id="minder-container"></div> &l
在vue2使用百度脑图的kityminder-core进行二次开发思维导图，给节点绑定数据后添加新的图标
ZMJ_QQ的博客
02-16 1118
需求说明：在给某个节点绑定文件数据后，用户并不能一眼看出哪个节点上绑定了数据，因此需要在绑定文件数据后给节点上加一个图标用于标识。
在vue2使用百度脑图的kityminder-core进行二次开发思维导图。扩展新的节点标识 图标
ZMJ_QQ的博客
05-09 569
需求说明：将原先的四个图标进行扩展，并且修改图标的样式。先贴一下最终实现的样式。
好久不见！~小编带给大家古老的vue搭配kityMinder使用方法
weixin_59774598的博客
05-18 717
其实，说实话，kityMinder封装的方法非常少，我有次操作去修改了它的源码。在现阶段看来用echarts的会多一点，可视化工程，kityMinder应该很少人知道，某站也没有相关视频。在小编接触之前真不知道有这个东西，最近一直在搞这个kityMinder，给我搞的是一个脑壳两个大。其实kityMinder是一个很强大的思维脑图的配置，如果我们想用代码去实现脑图其实很简单。⑦、简单的介绍 kityMinder的使用方法，如果有大佬对这个kityMinder了解比较多的话，可以在评论区多多指点，
(十)、kityminder支持富文本的编辑
saii的专栏
02-24 805
前段时间，去试用了下processon 上的脑图功能，发现人家这块确实已经做的好强大了。而且他的节点竟然还可以支持单独某个文本的颜色字体的设置，这个可是连xmind，本身都没有实现的功能的。所以想着学习下人家的实现看看是否能够借鉴到我们的平台上来。
Vue2 思维导图(第一版).emmx
10-22
Vue2 思维导图(第一版).emmx
vue-testcase-minder-editor vue2.0思维导图实例
04-28
使用vue-testcase-minder-editor插件+vue2.0实现的思维导图实例
基于电子vue的思维导图和轮廓工具-Vue.js开发
05-27
基于电子vue的思维导图和轮廓工具Mark Mind基于电子vue的思维导图和轮廓工具Build Setup＃安装依赖项npm install＃在本地主机上热加载服务：9080 npm run dev＃生成用于生产的电子应用程序npm run build屏幕快照功能...
KityMinder百度脑图一款在线的脑图编辑工具
08-08
KityMinder 是百度FEX团队的f-cube小组（原UEditor小组）的又一力作。作为一款在线的脑图编辑工具，它有着很多Native编辑工具的交互体验。KM与UE有着一样的宗旨，就是注重最终用户的使用体验。
一个小时学习javaScript
weixin_43064364的博客
04-20 737
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 382
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 973
​​​​​​​。
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
最新发布
宅斗士的博客
04-23 102
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
Vue.js（自定义指令）
Luo3255069063的博客
04-18 400
【代码】Vue.js（自定义指令）
vue2框架中有zm-tree-org组件，我希望在进行节点删除的时候能够进行弹窗提示，点击确认则删除该节点及子节点信息；要求给出弹窗代码及添加位置和删除节点的实现方法或调用方法
05-28
好的，针对您的需求，我向您提供以下解决方案： 1. 弹窗代码及添加位置 您可以在zm-tree-org组件中的删除节点方法中添加弹窗代码。具体来说，您可以在删除节点前，先弹出一个确认框，询问用户是否确认删除。如果用户点击了确认按钮，则执行删除节点的操作，包括删除该节点及其所有子节点的信息；如果用户点击了取消按钮，则不执行删除操作。 以下是一个示例代码： ```vue <template> <zm-tree-org :tree-data="treeData" :options="options" @delete-node="onDeleteNode" ></zm-tree-org> </template> <script> export default { data() { return { treeData: [...], // 树形结构数据 options: {...}, // 组件配置参数 }; }, methods: { onDeleteNode(node) { // 弹出确认框 this.$confirm("确定要删除该节点及其子节点吗？", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { // 用户点击了确认按钮，执行删除节点及子节点的操作 this.deleteNodeAndChildren(node); }) .catch(() => { // 用户点击了取消按钮，不执行删除操作 }); }, deleteNodeAndChildren(node) { // TODO: 执行删除节点及子节点的操作 }, }, }; </script> ``` 在上面的代码中，我们在zm-tree-org组件的`@delete-node`事件中调用了`onDeleteNode`方法，该方法用于弹出确认框。如果用户点击了确认按钮，则执行`deleteNodeAndChildren`方法，该方法用于删除节点及其所有子节点。 2. 删除节点的实现方法或调用方法 zm-tree-org组件提供了`deleteNode`方法，用于删除节点。如果您想要删除节点及其所有子节点，可以使用递归的方式实现。以下是一个简单的示例代码： ```javascript deleteNodeAndChildren(node) { // 查找当前节点的父节点 const parentNode = this.treeData.find((item) => item.id === node.parentId); if (parentNode) { // 从父节点的子节点中删除当前节点 const index = parentNode.children.findIndex((item) => item.id === node.id); if (index !== -1) { parentNode.children.splice(index, 1); } // 递归删除当前节点的所有子节点 if (node.children) { node.children.forEach((child) => { this.deleteNodeAndChildren(child); }); } } } ``` 在上面的代码中，我们首先查找当前节点的父节点，然后从父节点的子节点中删除当前节点。接着递归删除当前节点的所有子节点。 希望以上解决方案能够对您有所帮助。如果您还有其他问题或疑问，请随时向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值