安装

npm install @hellowuxin/mindmap
or
yarn add @hellowuxin/mindmap

vue中使用

<template><div class="nav"><mindmapheight="500"width="100%"nodeClickzoomableshowNodeAddv-model="data"></mindmap></div>
</template><script>
import mindmap from "@hellowuxin/mindmap";export default {components: { mindmap },data() {return {data: [{name: "思维导图",children: [{name: "标题一",children: [{ name: "内容一" }, { name: "内容二" }],},{name: "标题二",_children: [{ name: "折叠节点" }],},{name: "标题三",left: true,children: [{ name: "内容一" }, { name: "内容二" }],},],},],};},
};
</script>

API

Name	Type	Default	Description
v-model	Array	undefined	设置思维导图数据
width	Number	100%	设置组件宽度
height	Number	undefined	设置组件高度
xSpacing	Number	80	设置节点横向间隔
ySpacing	Number	20	设置节点纵向间隔
strokeWidth	Number	4	设置连线的宽度
draggable	Boolean	true	设置节点是否可拖拽
gps	Boolean	true	是否显示居中按钮
fitView	Boolean	true	是否显示缩放按钮
showNodeAdd	Boolean	true	是否显示添加节点按钮
keyboard	Boolean	true	是否响应键盘事件
contextMenu	Boolean	true	是否响应右键菜单
nodeClick	Boolean	true	设置节点是否可点击、编辑
zoomable	Boolean	true	是否可缩放、拖移
showUndo	Boolean	true	是否显示撤销重做按钮

vue项目中使用思维导图mindmap相关推荐

项目思维导图软件测试分析,在软件测试中使用思维导图技术
我们的大脑比书面文字更能处理和回忆视觉效果.视觉图像能够以描述性词语无法描述的方式带来快速的清晰度和理解.思维导图是利用这个事实来形象化地组织和呈现信息的工具. 思维导图软件测试思维导图是一个想法或 ...
0215前端日报：vue源码剖析思维导图
给「前端开发博客」加星标,每天打卡学习长按二维码即可识别"进入网页"查看哟~ 1.vue源码剖析思维导图(一) 趁这个"难得"的假期,学习了一下vue源码 ...
Vue 合同模板_vue源码逐行注释分析+40多m的vue源码程序流程图思维导图
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
Scrum项目开发实践思维导图
# Scrum项目开发实践思维导图 ## 一.产品规划 ### 1.1. 目标设定 - 产品愿景 - 目标设定 - 战略规划 - 产品路线图 ### 1.2. 用户调研 - 用户故事 - 用户旅程地图 ...
vue纯手写思维导图，拒绝插件(cv即用)
vue纯手写思维导图,拒绝插件(cv即用) 已完成功能点:折叠.放大.缩小.移动后续增加功能点:添加.删除先看结果: 有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找 ...
【MarkDown】CSDN Markdown之思维导图mindmap详解
文章目录思维导图(Mindmap) 一个思维导图的例子语法形状矩形圆角矩形圆形爆炸云朵六边形默认图标和类图标类不清晰的缩进 Markdown字符串与库或网站资源集成思维 ...
生活中的思维导图—读后感
<日常生活中的思维导图>成为一个有逻辑的人十句话概括这本书 1.思维导图是辅助思考的工具 2.思维导图可以分析复杂的问题,也能解决生活中的小事 3.思维导图的核心观点:一分支一词语 4. ...
iris流程图_GitHub - LeoIris/vue: vue源码逐行注释分析+40多m的vue源码程序流程图思维导图（diff部分待后续更新）...
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了 .这个vue源码逐行分析,我基本每 ...
头脑风暴生成中，思维导图Xmind ZEN 2020震撼出场！
Xmind ZEN 非常强大,拥有全新的软件内核,采用全新的渲染技术,让思维导图中的每一个字都非常美观,XMind让你专注思维,捕捉每一个灵感瞬间的 App.每当你有一个想法,XMind帮你专注于它的 ...
【Linux编程】二、Linux常见工具和项目开发（思维导图总结）
文章目录 Linux 软件包管理工具 yum 什么是软件包? 关于rzsz 注意事项查看软件包如何安装软件如何卸载软件总结:三板斧操作用yum来安装几个好玩的东西前期准备安装小火车安装 ...

vue项目中使用思维导图mindmap

安装

vue中使用

API

vue项目中使用思维导图mindmap相关推荐

最新文章

热门文章