English | 简体中文

Introduction

Vue-Hotspot-Pro is an image hotspot component for Vue.js.

Installation

npm (Recommended)

$ npm install vue-hotspot-pro --save

yarn

$ yarn add vue-hotspot-pro

Usage

ES Modules with npm (Recommended)

import Vue from 'vue'
import VueHotspotPro from 'vue-hotspot-pro' // refers to components/VueHotspotPro.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 VueHotspotPro from 'vue-hotspot-pro'
export default {
  components: {
    'v-hotspot': VueHotspotPro
  },
  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, width: 9, height: 9, hotspotColor: '#85ce61' },
          { Message: 'Another prepopulated hotspot', Title: 'Vue Hotspot 2', x: 53.3, y: 78.3, width: 9, height: 9, 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>

Project Structure

Project Structure

Config Options

| options | description | required | default | |:---------------:|---------------------------------------------------------------------------------------------------------------------------------------------------|:--------:|:---------------------------------------------------:| | image | Default image placeholder | true | an empty image with text 'Oops! image not found...' | | data | Object to hold the hotspot data points.Data structure: [ {Message: 'String', Title: 'String, x: Float, y: Float', hotspotColor: 'RGB' } ] | false | [] | | editable | Specify editable in which the plugin is to be used.true: Allows to create hotspots from UI.false: Display hotspots from data object | false | true | | interactivity | Event on which the hotspot data point will show up.allowed values: click, hover, none | false | hover | | ~~hotspotColor | background color for hotspot dots | false | 'rgb(66, 184, 131)'~~ | | messageBoxColor | background color for hotspot message boxes | false | 'rgb(255, 255, 255)' | | textColor | background color for hotspot text | false | 'rgb(53, 73, 94)' | | opacity | opacity for hotspots | false | 0.8 | | overlayText | text for overlay in edit mode | false | 'Please Click The Image To Add Hotspots.' |

Local development

$ npm i
$ npm run serve

Open http://localhost:8080/ to see the demo.