@apigo.cc/mindmap
v1.0.2
Published
原生 JS 编写的思维导图引擎。支持无限层级、缩放平移、节点折叠及动态增删。
Downloads
209
Readme
@apigo.cc/mindmap API 手册
原生 JS 编写的思维导图引擎。支持无限层级、缩放平移、节点折叠及动态增删。
1. 引入方式 (UMD 优先)
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/[email protected]/dist/mindmap.min.js"></script>
<script>
// 直接使用全局 Mindmap 类
const mm = new Mindmap(config);
</script>2. 核心用法
组件化用法 (推荐)
直接在 HTML 中使用 <Mindmap> 标签，通过 state 进行数据绑定。
<div $data="{
myMind: { id: 'root', text: '根节点', children: [{ text: '子节点 1' }] }
}">
<Mindmap $.state.data="myMind" style="height:500px"></Mindmap>
</div>JS 调用方式 (兼容)
...
3. API 参考
new Mindmap(options)
container: 挂载元素。data: 格式为{ id, text, children, _collapsed }的对象。nodeWidth / nodeHeight: 节点尺寸。hGap / vGap: 间距。
实例方法
addNode(parentId, text): 动态添加节点。removeNode(nodeId): 动态删除节点。render(): 强制重新布局与重绘。
开发者提示 (AI 必读)
- 全局变量: UMD 模式下，
Mindmap类自动挂载到window。 - 唯一 ID: 每个节点必须拥有全局唯一的
id。 - 数据响应: 修改
mm.data属性后必须手动执行mm.render()。