Vue-HotspotĀ is an image hotspot component for Vue.js
Follow these steps to use it in your project
npm (Recommended)
$ npm install vue-hotspot --save
yarn
$ yarn add vue-hotspot
Usage
ES Modules with npm (Recommended)
import Vue from 'vue' import VueHotspot from 'vue-hotspot'
Using the component
<template> <v-hotspot :init-options="hotspotConfig" @save-data="saveData" @after-delete="afterDelete" /> </template> <script> import Vue from 'vue' import VueHotspot from 'vue-hotspot' export default { components: { 'v-hotspot': VueHotspot }, data () { return { hotspotConfig: { image: 'your-image-url.png', editable: true, interactivity: 'hover', data: [ { Message: 'A prepopulated hotspot', Title: 'Vue Hotspot 1', x: 33.3, y: 58.33 }, { Message: 'Another prepopulated hotspot', Title: 'Vue Hotspot 2', x: 53.3, y: 78.3 } ], hotspotColor: '#85ce61', messageBoxColor: '#409eff', textColor: '#333', opacity: 0.9 } } }, methods: { saveData (data) { // Do something with the list of hotspots console.log(data) }, afterDelete () { // Do something after delete console.log('Do something after delete ...') } } } </script>