Mind elixir 介绍
安装
npm
npm i mind-elixir -S
import MindElixir,{ E } from 'mind-elixir'
script 标签引入
<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
html 结构
<div class="outer">
<div id="map"></div>
</div>
<style>
.outer {
position: relative;
margin: 50px;
}
#map {
height: 500px;
width: 100%;
overflow: auto;
}
</style>
初始化
let mind = new MindElixir({
el: '#map',
direction: MindElixir.LEFT,
data: MindElixir.new('new topic'),// 也可以把 getDataAll 得到的数据初始化
draggable: true,// 启用拖动 default true
contextMenu: true,// 启用右键菜单 default true
toolBar: true,// 启用工具栏 default true
nodeMenu: true,// 启用节点菜单 default true
keypress: true,// 启用快捷键 default true
})
mind.init()
// get a node
E('node-id')
Data Export
mind.getAllData()
// see src/example.js
使用提示
direction 选项
direction 选项可选 MindElixir.LEFT、MindElixir.RIGHT 和 MindElixir.SIDE。
html 结构
挂载的目标需要定宽高,可以是百分百;外层元素建议设置 position: relative;,否则菜单位置以视窗为标准分布。
E 函数
在使用节点操作方法时需要传入的参数可以借助 E 函数获得。
mind.insertSibling(E('bd4313fbac40284b'))
网站地址:https://mindelixir.ink/#/
GitHub:https://github.com/ssshooter/mind-elixir-core
网站描述:一个免费开源的思维导图内核
Mind elixir
官方网站:https://mindelixir.ink/#/
小编说
以上是编程之家为你收集整理的Mind elixir全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。