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.