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