Add Hotspot To Your Image With vue-hotspot Component

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'

Register the component.

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. '
}]

Preview:

Changelog:

v2.0.2 (10/02/2020)

• Update

v2.0.1 (12/19/2019)

• Update

Download Details:

Author: cn-wx

Live Demo: https://cn-wx.github.io/vue-hotspot/

Download Link: https://github.com/cn-wx/vue-hotspot/archive/master.zip

Official Website: https://github.com/cn-wx/vue-hotspot

Install & Download: