安装和使用

npm install vue-pic-marker

import Vue from 'vue'

import VuePicMarker from 'vue-pic-marker';
Vue.use(VuePicMarker);

<VuePicMarker img-url="images/1.jpg" width="800"></VuePicMarker>

props

| 参数 | 类型 | 说明 | 默认 | | ------------- |-------------| -----|-------------| | img-url | String |图片路径| | | read-only | Boolean |是否只读| false| | unique-key | Boolean | 识别控件唯一性，当页面存在多个控件时需要区分| | | show-grid | Boolean | 是否显示网格| false | | width | String, Number | 图片宽度 | 100% | | height | String, Number | 图片高度 | auto | | allow-drag-add | Boolean | 是否允许拖拽添加标记 | true | | allow-click-add | Boolean | 是否允许点击添加标记 | true | | dot-size | Number | 点击添加标记的大小 | 20 | | comment | Boolean | 是否启用评论功能 | true |

event

| 事件名 | 说明 | 参数 | | -------- | ----- | ---- | | image-load | 图片加载完成后回调 | rawW,rawH,currentW,currentH | | data-rendered | 当标注框主动渲染数据后时回调 | uniqueKey | | updated | 当标注框位置或者标框属性发生改动 | data, movement, uniqueKey | | draw | 当画完一个标注框时回调 | data, movement, uniqueKey | | context-menu | 右键点击事件 | event, data, node, uniqueKey | | remove | 标注删除事件 | data, node, uniqueKey |

methods

| 方法名 | 说明 | 参数 | 返回值 | | -------- | ----- | ---- | ---- | | getMarker | 返回marker对象 | | marker| | renderData | 加载主动渲染数据 | data | | | clearData | 清空所有标注 | | | | setTag | 设置当前选中标注内容 | tagObj | | | setType | 设置绘制的标注类型，会为绘制的标注加上该css class | typeName | |