0.0.5 • Published 2 years ago
image-map-dd v0.0.5
image-map
Project setup
npm install image-map-dd
In Vue main.js
import ImageMap from 'image-map-dd'
Vue.use(ImageMap)
In you want to use .vue file
<template>
<div>
<ImageMap></ImageMap>
</div>
</template>
prop
- value,width,is_edit,min_size
<template>
<div>
<ImageMap :value="value" :width="width" :is_edit="is_edit" :min_size="min_size"></ImageMap>
</div>
</template>
<script>
export default {
name: 'page_name',
data() {
return {
value:{
uuid:0001, // 表示唯一值
source:'https://img2.baidu.com/it/u=2116933009,657087104&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=500', // 图片资源
zones:[
{
w:100, // 热点区域宽
h:200, // 热点区域高
x:100, // 热点区域左上角X坐标
y:100, // 热点区域左上角Y坐标
i:1, // 热点区域层级优先级,数字越大,优先级越高
link:'www.baidu.com' // 热点区域响应链接
}
]
},
is_edit:true, // 是否是编辑区域,默认是
min_size: 40 // 单个热点区域最小宽高,默认40,number类型
width:600 // 图片区域宽度,实际显示宽度要根据这个宽度来计算热点区域的缩放 ,默认600 number类型
}
}
}
</script>
- method changeData 数据编辑后回调方法 value同prop中value,会多width和height
<template>
<div>
<ImageMap @changeData="changeData"></ImageMap>
</div>
</template>
<script>
export default {
methods:{
changeData(value){
}
}
}
</script>