Skip to content

jamesxwang/vue-hotspot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Vue circle-ci Coverage Status npm License GitHub code size in bytes Version

English | ็ฎ€ไฝ“ไธญๆ–‡

Introduction

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

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

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>

Live Demo

You can see more examples here.

Project Structure

.
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ README.zh-CN.md
โ”œโ”€โ”€ babel.config.js
โ”œโ”€โ”€ dist                        // folder, build files from src/components
โ”œโ”€โ”€ docs                        // folder, build files from src/demo
โ”œโ”€โ”€ jest.config.js              // jest config
โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ public                      // folder, demo public files
โ”‚ย ย  โ”œโ”€โ”€ favicon.ico
โ”‚ย ย  โ””โ”€โ”€ index.html
โ”œโ”€โ”€ publish.sh                  // publish shell script
โ”œโ”€โ”€ rollup.config.js            // rollup config
โ”œโ”€โ”€ src                         // folder, src folder
โ”‚ย ย  โ”œโ”€โ”€ components              // folder, main folder
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ VueHotspot.vue      // entry file
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ module              // folder, module folder
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ControlBox.vue
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ DataPoint.vue
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ utils               // folder, utils folder
โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ common.js
โ”‚ย ย  โ””โ”€โ”€ demo                    // folder, demo files source folder
โ”‚ย ย      โ”œโ”€โ”€ Demo.vue
โ”‚ย ย      โ”œโ”€โ”€ assets
โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ logo.png
โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ unimelb.jpg
โ”‚ย ย      โ”œโ”€โ”€ components
โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ ShowCode.vue
โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Toggle.vue
โ”‚ย ย      โ””โ”€โ”€ main.js
โ”œโ”€โ”€ tests                       // folder, unit test folder
โ”‚ย ย  โ””โ”€โ”€ unit
โ”‚ย ย      โ”œโ”€โ”€ ControlBox.spec.js
โ”‚ย ย      โ”œโ”€โ”€ DataPoint.spec.js
โ”‚ย ย      โ””โ”€โ”€ common.spec.js
โ””โ”€โ”€ vue.config.js               // vue config file

Project Structure

.
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ README.zh-CN.md
โ”œโ”€โ”€ babel.config.js
โ”œโ”€โ”€ dist                        // folder, build files from src/components
โ”œโ”€โ”€ docs                        // folder, build files from src/demo
โ”œโ”€โ”€ jest.config.js              // jest config
โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ public                      // folder, demo public files
โ”‚ย ย  โ”œโ”€โ”€ favicon.ico
โ”‚ย ย  โ””โ”€โ”€ index.html
โ”œโ”€โ”€ publish.sh                  // publish shell script
โ”œโ”€โ”€ rollup.config.js            // rollup config
โ”œโ”€โ”€ src                         // folder, src folder
โ”‚ย ย  โ”œโ”€โ”€ components              // folder, main folder
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ VueHotspot.vue      // entry file
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ module              // folder, module folder
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ControlBox.vue
โ”‚ย ย  โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ DataPoint.vue
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ utils               // folder, utils folder
โ”‚ย ย  โ”‚ย ย      โ””โ”€โ”€ common.js
โ”‚ย ย  โ””โ”€โ”€ demo                    // folder, demo files source folder
โ”‚ย ย      โ”œโ”€โ”€ Demo.vue
โ”‚ย ย      โ”œโ”€โ”€ assets
โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ logo.png
โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ unimelb.jpg
โ”‚ย ย      โ”œโ”€โ”€ components
โ”‚ย ย      โ”‚ย ย  โ”œโ”€โ”€ ShowCode.vue
โ”‚ย ย      โ”‚ย ย  โ””โ”€โ”€ Toggle.vue
โ”‚ย ย      โ””โ”€โ”€ main.js
โ”œโ”€โ”€ tests                       // folder, unit test folder
โ”‚ย ย  โ””โ”€โ”€ unit
โ”‚ย ย      โ”œโ”€โ”€ ControlBox.spec.js
โ”‚ย ย      โ”œโ”€โ”€ DataPoint.spec.js
โ”‚ย ย      โ””โ”€โ”€ common.spec.js
โ””โ”€โ”€ vue.config.js               // vue config file

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, 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.

License

Vue-hotspot component is delivered under the MIT License