Add Hotspot To Your Image With vue-hotspot Component

Install & Download:

Description:

vue-hotspot is an image note component that adds interactive hotspots with tooltips to your images.

How to use it:

Import the component.

import VueHotspot from 'vue-hotspot'

Vue.component('v-hotspot', VueHotspot)

Insert the component into your template.

<template>
  <v-hotspot
    :init-options="hotspotConfig"
    @save-data="saveData"
    @after-delete="afterDelete" />
</template>

Use the component.

export default {
  components: {
    'v-hotspot': VueHotspot
  },
  data () {
    return {
      hotspotConfig: {
        image: 'your-image-url.png',
        editable: true,
        interactivity: 'hover'
      }
    }
  },
  methods: {
    saveData (data) {
      // Do something with the list of hotspots
      console.log(data)
    },
    afterDelete () {
      // Do something after delete
      console.log('Do something after delete ...')
    }
  }
}

Default configs.

// Object to hold the hotspot data points
data: [],
// Default image placeholder
image: 'https://via.placeholder.com/600x500',
// Specify editable in which the plugin is to be used
// `true`: Allows to create hotspot from UI
// `false`: Display hotspots from `data` object
editable: true,
// Event on which the hotspot data point will show up
// allowed values: `click`, `hover`, `none`
interactivity: 'hover',
// Hotspot schema
schema: [
{
  'property': 'Title',
  'default': 'Vue Hotspot'
},
{
  'property': 'Message',
  'default': 'This is a Vue Hotspot Component which lets you create hotspot. '
}]