🖖 Vue Image Hotspot Component Plugin For Vue.js

vue-image-hotspot

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

add hotspot to image, image hotspot in html, image hotspot example, responsive image hotspots, image hotspot plugin

How to make use of it:

Installation:

$ npm install vue-hotspot --save
$ yarn add vue-hotspot

ES Modules with npm (Recommended).

import Vue from 'vue'
import VueHotspot from 'vue-hotspot' // refers to components/VueHotspot.vue in webpack

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>

Add Hotspot To Your Image, vue-hotspot Plugin/Github


See Demo And Download

Official Website(jamesxwang): Click Here

This superior jQuery/javascript plugin is developed by jamesxwang. For extra Advanced Usages, please go to the official website.