vue-hotspot
Hotspot component for Vue.js.
Last updated 5 months ago by cn-wx .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-hotspot 
SYNC missed versions from official npm registry.

Vue circle-ci Coverage Status Downloads 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.

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

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

Current Tags

  • 2.0.1                                ...           latest (5 months ago)

17 Versions

  • 2.0.1                                ...           5 months ago
  • 2.0.0                                ...           5 months ago
  • 2.0.0-alpha.4                                ...           5 months ago
  • 1.1.7                                ...           7 months ago
  • 1.1.6                                ...           7 months ago
  • 1.1.5                                ...           9 months ago
  • 1.1.4                                ...           9 months ago
  • 1.1.3                                ...           9 months ago
  • 1.1.2                                ...           9 months ago
  • 1.1.0                                ...           9 months ago
  • 1.0.3                                ...           9 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           9 months ago
  • 0.1.3                                ...           9 months ago
  • 0.1.2                                ...           9 months ago
  • 0.1.1                                ...           9 months ago
  • 0.1.0                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (9)
Dev Dependencies (18)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |