Introduction
A vue2 hotzone component
Demo | 案例
Install
npm i vue-hotzone --save# or yarn add vue-hotzone
Use
// Use in component components: hotzone // Use in global Vue // orVue
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 |
Develop
$ git clone https://github.com/OrangeXC/vue-hotzone.git $ cd vue-hotzone $ yarn $ yarn serve
License
Vue-hotzone is MIT licensed.