@1samare/node-tree

@1samare/node-tree

高性能双向树布局组件，附带 Vue 2 适配层与纯布局 core。

安装

npm install @1samare/node-tree vue@^2.7

快速开始

import Vue from 'vue'
import NodeTree from '@1samare/node-tree/vue2'
import '@1samare/node-tree/style.css'

Vue.use(NodeTree)

<node-tree :data="treeData" layout-direction="horizontal" />

引入方式

Props

树数据字段

interface TreeNodeData {
  id: string
  title: string
  owner?: string
  progress?: number
  status?: 'normal' | 'risk' | 'delayed' | 'unset'
  hasChild?: boolean
  leftChildren?: TreeNodeData[]   // horizontal 左侧 / vertical 上方
  rightChildren?: TreeNodeData[]  // horizontal 右侧 / vertical 下方
  children?: TreeNodeData[]       // rightChildren 的兼容别名
}

Methods（通过 ref 调用）

<node-tree ref="tree" :data="treeData" />

this.$refs.tree.zoomIn()
this.$refs.tree.addNode('root-id', 'right', {
  id: 'new-1',
  title: '新节点'
})

Events

Slots

node（scoped slot）

自定义节点 DOM：

<node-tree :data="treeData">
  <template #node="{ data, node, toggle, loading, loadChildren, isVisible }">
    <div class="my-card">{{ data.title }}</div>
  </template>
</node-tree>

Core API

若只需布局算法：

import { layoutForest, insertTreeNode } from '@1samare/node-tree/core'

const layout = layoutForest(treeData, {
  layoutDirection: 'horizontal',
  nodeWidth: 320,
  verticalGap: 24
})

const nextTree = insertTreeNode(treeData, 'parent-id', 'right', {
  id: 'child-id',
  title: 'Child'
})

本地开发

npm install
npm run dev      # 启动 playground
npm run test     # 运行测试
npm run build    # 构建 dist

License

MIT