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.