0.0.7 • Published 3 years ago
vue-hotzone-vue3 v0.0.7
Introduction
A vue2 hotzone component
Demo | 案例
Install
npm i vue-hotzone --save
# or
yarn add vue-hotzoneUse
// 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 serveLicense
Vue-hotzone is MIT licensed.