vue-hotspot-ets

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

.
├── 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
│   │   ├── VueHotspotEts.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

Local development

$ npm i
$ npm run serve

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