跳到主要内容

安装与使用

安装

npm i mind-elixir -S

使用

import MindElixir from 'mind-elixir'

let options = {
el: '#map', // or HTMLDivElement
}

let mind = new MindElixir(options)

// create new map data
const data = MindElixir.new('new topic')
mind.init(data)

要使用 Mind Elixir,在 options 中只要传入一个 el(代表挂载的目标 DOM 元素)即可。更多配置可以查阅完整配置

注意

因为 Mind Elixir 挂载时高度为容器高度的 100%,所以请务必设置容器高度,否则造成显示异常。

<div id="map"></div>
<style>
#map {
height: 500px;
width: 100%;
}
</style>

对思维导图的操作

  • 操作与常见思维导图应用基本一致
  • 快捷键可见快捷键章节
  • 鼠标左键可拖动节点,或多选节点
  • 鼠标右键可拖动画布
  • 右键选择“连接”后再点击另一个节点,可连接两个节点

数据导出与更新

用户对思维导图的操作后,数据随即改变,可以调用 getData 方法获取最新数据。数据格式可见数据导出

const data = mind.getData()

有需要使用整组新数据刷新当前思维导图时,可以使用 refresh 方法。

mind.refresh(data)