从 0 到 1 开发 Splicetree无头树:事件系统与插件机制:可组合的交互

5 阅读1分钟

SpliceTree 是一个无头(Headless)、框架无关的树运行时。专注树的结构、状态与行为,通过插件扩展勾选、拖拽、搜索、懒加载、键盘/点击选择等能力;UI 渲染由你决定,官方提供 Vue 3 适配器。

核心通过事件总线把“输入”“行为”“刷新”串起来,插件通过注册进入运行时进行扩展。

事件总线

  • events.on('event', handler)
  • events.emit({ name, ...payload })

插件接口

  • setup(ctx):扩展实例方法或状态,监听/派发事件
  • extendNode(node, ctx):扩展每个节点的方法或状态查询

配置聚合

插件配置统一放到 configuration.<pluginName> 下,按需提供:

createSpliceTree(data, {
  plugins: [/* ... */],
  configuration: {
    selectable: { multiple: true },
    keyboard: { target: '.list' },
  },
})

  • 相关链接: