# human-body-diagram

#### 介绍
人体图部位插件2.0，增加热区和部位区分

#### 提示
因其中缩放等功能用到了d3，所以需要安装d3依赖。
```
npm i d3
```


#### 安装教程

npm i human-body-diagram

#### 使用说明
```
import { 
  WomanDiagram,
  ChildDiagram,
  ManDiagram
} from 'human-body-diagram'; //女性人体图

<template>
  <div>
    <woman-diagram 
	ref="womanRef"
	:width="200"
	:height="400"
	is-zoom
	@change="getData"
    />
  </div>
</template>
<script>
  export default {
    name: 'Test',
    data() {
      return {}
    },
    methods: {
      // 获取选中部位
    	getData(part) {
      	console.log(part) //选中部位名称 eg: {name: '胆', title: 'Gallbladder'}
      },
      // 重置 缩放
      // 要在开启is-zoom的前提下有用
      resetZoom() {
      	this.$refs.womanRef.zoomReset()
      },
      // 通过点击主动放大缩小
      customZoom() {
      	this.$refs.womanRef.
      }
    }
  }
</script>
```

#### 事件

|  事件 | 说明  | 参数  |   |
|---|---|---|---|
| change  | 点击对应部位会触发该事件，获取选中部位数据。  | part  |   |
| zoomReset  | 重置缩放，如上例代码中使用。  |   |   |
| zoomEvent| 主动通过事件触发缩放大小，如上例代码中使用。  |  "large"/"small" |   |



#### 属性
|  属性| 说明  | 类型|   |
|---|---|---|---|
| value| 设置当前选中部位  | Array|   |
| width| 宽度。  | Number  |   |
| height| 高度。  |  Number |   |
| is-zoom| 是否缩放  |  Boolean|   |

![输入图片说明](https://images.gitee.com/uploads/images/2020/0609/105525_a5cf21f3_1675212.png "屏幕截图.png")