Introduction

A vue2 hotzone component

基于开源项目vue-hotzone二次开发

Install

npm i vuehotzone2 --save
# or
yarn add vuehotzone2

Use

// Use in global
import hotzone from 'vuehotzone2'
import 'vuehotzone2/dist/vuehotzone2.css'

Vue.use(hotzone)

<hotzone [options]></hotzone>

Options

Attributes

You can set them to your data function

| Attribute | Type | Description | Keys | |:----------|:-------|:---------------------------------|:-------------------------------------------| | image | String | image of hotzone(required: true) | | | max | Number | max number of zones | | | zonesInit | Array | init zones | item(heightPer, leftPer, topPer, widthPer) |

Events

| Event Name | Description | Parameters | |:-----------|:-------------------------------------------------------------------------|:--------------------------------| | change | triggers when the zones changes | the array of the zones | | add | triggers when the zone add | the add zone item | | remove | triggers when the zone remove | the index of the remove zone | | overRange | triggers when zones number > max | the index of the overRange zone | | erase | triggers when add zone overRange or smaller than the minimum area(48*48) | the index of the erase zone |

License

vuehotzone2 is Apache licensed.