图片热区点击

基于 vue-hotzone 二次定制

Install

npm install vue-hotmap --save
# or
yarn add vue-hotmap

Use

// Use in component
import hotmap from 'vue-hotmap'

export default {
  components: {
    hotmap
  }
}

// Use in global
import hotmap from 'vue-hotmap'

Vue.component(hotmap.name, hotmap)

// or
Vue.use(hotmap)

<hotmap [options]></hotmap>

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

MIT