簡介

Vue-Picture-BD-Marker(以下簡稱Vmarker)是一款基于ui-picture-bd-marker 1.3.3+封裝的一個自定義Vue控件，用來在圖片上進行標注的工具。 Vmarker可以顯示與編輯標注，提供基本坐標定位(x,y,width,height)標注框的位置。

該插件優勢，

• 可以實現響應式，即放大和縮小瀏覽器窗口后標注的內容也會隨著改變，

• 可獲得所有標點信息的x,y的坐標信息，可以直接在后臺記錄值，方便用于回顯標注信息

vue-picture-bd-marker標注功能

安裝

npm install vue-picture-bd-marker -S

引入

import {AIMarker} from 'Vue-Picture-BD-Marker'

需要特別注意，根據官網的提示是會提示錯誤的，找不到Vue-Picture-BD-Marker包需要使用下面的方式進行引入

import {AIMarker} from 'vue-picture-bd-marker'

使用

直接使用標簽，就可以引入該組件了，就可以簡單使用了

...

監聽事件的使用

...

圖片中打多個標簽

{{msg}}

打標簽

文檔地址：

https://vmarker.sagocloud.com/about/

github地址：

https://github.com/sunshengfei/ui-picture-bd-marker

獲得所有標注信息

this.$refs['aiPanel-editor'].getMarker().getData();

注意：

該插件在使用時沒有監聽點擊事件，同時渲染的時候只能渲染純文本信息，所以在某些情況使用的時候無法拓展更多的功能，下篇文章將會對該插件進行改造，實現對html的渲染，綁定監聽事件的功能；

總結

以上是生活随笔為你收集整理的html点击图片放大_vue 插件之picture-markert图片标注的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。