family-tree

显示家族图谱的组件，参考Vue-Tree-Chart
支持鼠标滚轮缩放及鼠标拖拽

API

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | json | 树形数据 | NodeData | - | | defaultImage | 节点默认图片 | String | - |

Event

| 事件名称 | 说明 | | -------- | ------------- | | click-node | 节点点击事件 | | zoom-end | 缩放结束事件 |

slot 插槽

| 名称 | 说明 | | ----- | -------------- | | image | 自定义节点图片 | | name | 自定义节点文字描述 | | tools | 自定义工具栏 |

Example 示例

    <family-tree
      :json="data"
      style="height: 700px"
      @click-node="onClickNode"
      @zoom-end="onZoomEnd"
    >
      <template v-slot:image="node">
        <div class="avatar">
          <img :src="node.info.image" />
        </div>
      </template>
      <template v-slot:name="node">
        <div class="name">{{ node.info.name }}</div>
      </template>
      <template v-slot:tools="tools">
        <button @click="onClick(tools)">tools</button>
      </template>
    </family-tree>

数据定义

type KeyType = string | symbol;

interface UserInfo {
  name: string;
  image: string;
  gender?: number;
  age?: number;
  birthday?: string;
  relation?: string;
}

interface NodeData {
  id: KeyType;
  info?: UserInfo;
  class: Array<string>;
  extend?: boolean;
  children?: NodeDataList;
  mate?: NodeData;
}

type NodeDataList = Array<NodeData>;