Introduction

A vue2 hotzone component

Demo | 案例

Install

npm i vue-hotzone --save
# or
yarn add vue-hotzone

Use

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

export default {
  components: {
    hotzone
  }
}

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

Vue.component(hotzone.name, hotzone)

// or
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 |

Develop

$ git clone https://github.com/OrangeXC/vue-hotzone.git

$ cd vue-hotzone

$ yarn

$ yarn serve

License

Vue-hotzone is MIT licensed.