Vue hotspot

Hotspot component for Vue.js.

Version: 2.0.2 Updated: 10/01/2020

By: cn-wx License: MIT

Downloads Last 30 Days: 91

Install

npm i vue-hotspot
yarn add vue-hotspot

Repository: https://github.com/cn-wx/vue-hotspot

CDNs

bundle.run: https://bundle.run/vue-hotspot

jsDelivr: https://cdn.jsdelivr.net/npm/vue-hotspot

unpkg: https://unpkg.com/vue-hotspot

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

Categories: Vue js