Github 地址: https://github.com/ssshooter/...
試用地址: https://mindelixir.ink/
Mind elixir 是一個免費開源的思維導圖內核
立即試用
在項目中使用
安裝
NPM
npm i mind-elixir -S
import MindElixir, { E } from 'mind-elixir'
script 標籤引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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://inspiring-golick-3c01...