vue 区域组件_vue2热点区域组件

vue 区域组件

VUE-HOTZONE (VUE-HOTZONE)

Vue cover flow component(vue).

Vue盖流组件(vue)。

View demo 查看演示 Download Source 下载源

安装 (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

翻译自: https://vuejsexamples.com/a-vue2-hot-zone-component/

vue 区域组件