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