vue-image-marker
v0.1.4
Published
Image container for adding icon marker to the image.
Downloads
95
Readme
vue-image-marker
Image container for adding icon marker to the image.
Demo
Usage
Install:
npm i vue-image-marker
Import:
import Vue from 'vue'
import VueImageMarker from 'vue-image-marker'
Vue.component('VImageMarker', VueImageMarker)
Use:
<v-image-marker src="foo.jpg" :padding="20">
<div
v-for="marker in markers"
:style="{
position: 'absolute',
width: '10px',
height: '10px',
left: `calc(${ (marker.x * 100) }% - 5px)`,
top: `calc(${ (marker.y * 100) }% - 5px)`,
backgroundColor: 'yellow',
}"
></div>
</v-image-marker>
API: Props
src
: Url of the image where the markers overlaid on.padding
: Container padding, default is 0.
License
MIT