Hotspot component for Vue.js – vue-hotspot

Vue-Hotspot is an image hotspot component for Vue.js. where you can click any part of the image and add note about the selected area with title and description, good component for detailing image areas. It is an image note component that adds interactive hotspots with tooltips to your images.

Installation

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' 


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

Global variable

Without any module system, the component is exposed as window.VueHotspot.


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


Using the component

Template

<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'
      }
    }
  },
  methods: {
    saveData (data) {
      
      console.log(data)
    },
    afterDelete () {
      
      console.log('Do something after delete ...')
    }
  }
}
</script>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by cn-wx. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.