图片热区点击
基于 vue-hotzone 二次定制
$3
``
bash
npm install vue2-hotmap --save
or
yarn add vue2-hotmap
`
$3
`
js
// Use in component
import hotmap from 'vue2-hotmap'
export default {
components: {
hotmap
}
}
// Use in global
import hotmap from 'vue2-hotmap'
Vue.component(hotmap.name, hotmap)
// or
Vue.use(hotmap)
`
`
html
``
$3
#### 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 |
$3
MIT