family-tree-vue v0.6.0

family-tree

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

API

Event

slot 插槽

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>;