family-tree-vue/README.md

A vue2 component to display family tree

# family-tree

> 显示家族图谱的组件，参考[Vue-Tree-Chart](https://github.com/tower1229/Vue-Tree-Chart)  
支持鼠标滚轮缩放及鼠标拖拽

![img](./demo.jpg)

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

## Event

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

## slot 插槽

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

## Example 示例
```jsx
    <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>
```

### 数据定义

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