English | 简体中文

Introduction

Vue-Hotspot-Ets is an image hotspot component for Vue.js. Extended from Vue-Hotspot

Installation

npm (Recommended)

$ npm install vue-hotspot-ets --save

yarn

$ yarn add vue-hotspot-ets

Usage

ES Modules with npm (Recommended)

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

Using the component

<template>
  <v-hotspot
    :init-options="hotspotConfig"
    @add-hotspot="addHotspot"
    @save-data="saveData"
    @hotspot-click="hotspotClick"
    @after-delete="afterDelete"
    @delete-hotspot="hotspotDelete"
    @edit-hotspot="hotspotEdit"/>
</template>

<script>
import Vue from 'vue'
import VueHotspotEts from 'vue-hotspot-ets'
export default {
  components: {
    'v-hotspot': VueHotspotEts
  },
  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: {
    changeEditable (conf) {
      if (!conf) return
      conf.editable = !conf.editable
    },
    saveData (data) {
      // A list of hotspots
      console.log(data)
    },
    afterDelete () {
      // Do something after delete
      console.log('Do something after delete ...')
    },
    hotspotClick () {
      console.log('Do something after click ...')
    },
    hotspotDelete (hotspot) {
      console.log(hotspot)
    },
    hotspotEdit (hotspot) {
      console.log(hotspot)
    },
    addHotspot (hotspot) {
      console.log('Added hotspot', hotspot)
    }
  }
}
</script>

Live Demo

You can see more examples here.

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'} ] | 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, both,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.' | | isDeletable | If hotspot deletable | false | false | needDescription | Allows to remove description from hotspot | false | false | displayControlBox | Allows to display/remove control box | false | true | hotspotEditable | Allow to edit hotspot on click | false | true

Local development

$ npm i
$ npm run serve

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