human-body-diagram v1.0.10

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>

事件

属性