0.1.6 • Published 2 years ago
vue-pic-marker v0.1.6
安装和使用
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 |