vue 区域组件
VUE-HOTZONE (VUE-HOTZONE)
Vue cover flow component(vue).
Vue盖流组件(vue)。
安装 (Install)
npm install 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) |
属性 | 类型 | 描述 | 按键 |
---|---|---|---|
图片 | 串 | hotzone的图片(必填:true) | |
最高 | 数 | 最大区域数 | |
zoneInit | 数组 | 初始化区 | 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 |
活动名称 | 描述 | 参量 |
---|---|---|
更改 | 区域更改时触发 | 区域阵列 |
加 | 在区域添加时触发 | 添加区域项 |
去掉 | 区域删除时触发 | 删除区域的索引 |
范围外 | 当区域编号>最大时触发 | overRange区域的索引 |
抹去 | 当添加区域overRange或小于最小区域时触发(48 * 48) | 擦除区的索引 |
发展 (Develop)
git clone https://github.com/OrangeXC/vue-hotzone.git
cd vue-hotzone
yarn # or npm install
yarn serve # or npm run serve
vue 区域组件