Hotspot component for Vue.js – vue-hotspot

by Posted on

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' // refers to components/VueHotspot.vue in webpack

// register component to use
Vue.component('v-hotspot', VueHotspot)

Global variable

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

// register component to use
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) {
      // Do something with the list of hotspots
      console.log(data)
    },
    afterDelete () {
      // Do something after delete
      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.

Published by admin