思维导图Vue2组件

前言

一个由MindNode启发的思维导图Vue组件，基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠…

安装

npm install @hellowuxin/mindmap

props

events

案例

<template><mindmap v-model="data"></mindmap>
</template><script>
import mindmap from '@hellowuxin/mindmap'export default {components: { mindmap },data: () => ({data: [{"name":"如何学习D3","children": [{"name":"预备知识","children": [{ "name":"HTML & CSS" },{ "name":"JavaScript" },...]},{"name":"安装","_children": [{ "name": "折叠节点" }]},{"name":"进阶","left": true},...]}]})
}
</script>

交互逻辑

鼠标：space+左键移动、右键菜单、ctrl+滚轮缩放、左键选中

触控板：双指滚动移动、双指菜单、双指捏合缩放、单指选中

思维导图Vue2组件相关推荐

思维导图Vue组件 mindmap
开箱即用的思维导图Vue组件 GitHub 在线演示:https://mindnode.5xin.xyz/
finereport前端组件类思维导图
总结finereport前端组件类思维导图
在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令
需求说明:最近在搞kityminder-core的思维导图,需要增加一个给节点添加文件的功能,一直在研究源码,发现都是通过执行命令的方式实现的.一直卡在新增命令的步骤,搞了好多天了今天找到了如何在源码 ...
微信小程序组件思维导图
微信小程序组件思维导图
一款基于React的思维导图脑图组件 (zz-mind-react)
zz-mind-react 使用文档前往NPM 目录 zz-mind-react 使用文档 [前往NPM](https://www.npmjs.com/package/zz-mind-react) ...
mistral 工作流组件之二思维导图
Mistral 思维导图转载于:https://www.cnblogs.com/shenmopingshuo/p/5966657.html
17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
本文首发于17张思维导图,2021年作为一名前端开发者需要掌握这些,前端面试复习资料参考大纲,转载请联系作者前言 2020年最后一个月了,熬夜多天整理出17张思维导图,对前端面试复习知识点进行了最全 ...
精美好用的思维导图插件，无缝对接各种前端框架，快来围观吧
思维导图(ant-mind) ant-mind是一款基于html5的svg进行设计与开发的一个包含文档模式与思维导图模式的一个纯js类库,支持在当前主流的前端框架中接入. 效果图: 如何使用 1.下载 ...
前端学习路线图--陆神版本思维导图
说起前端届IT教育老大,怎么能没有千锋的名字,学前端,来千锋,入股不亏,学习带飞! 你可能兜兜转转看了不少路线图只是得到了罗列的知识点和一张思维导图,但是学这些能做些什么?学到这个程度可以找到什么样的 ...

思维导图Vue2组件

前言

安装

props

events

案例

交互逻辑

思维导图Vue2组件相关推荐

最新文章

热门文章