目前在做的电商项目是通过cms系统生成了页面配置的json文件来前端渲染页面，其中有一个热区组件，通过给图片画区域，然后用户点击不同区域跳转到不同的页面去浏览。
1.如何实现热区
当时想到的方法是通过定位根据json里面的配置的坐标点来画盒子。然后对这个盒子加一个点击事件。想到这种方式去实现有点耗时间，先排除，去找度娘。通过度娘我们发现，html是自带有热区的标签的map和area。心情一下子就舒畅了起来，我们的宗旨是能少敲点代码就尽量不多敲一个字母。
2.愉快的实现我们的热区组件
- 通过查询了解到一个热区map会生成一系列的area，这个area就是每一块的小热区块。area元素有一个coords属性，这个属性值是这个方形的坐标点。同时我们需要给area标签上设置shape="rect"。
<map>
<area shape="rect" coords="0,0,10,10"/>
</map>
-
coords属性的值如何排列
coords的值是4个，分别是由，号隔开。前两个表示起始点的坐标，我们在浏览器页面中坐标系的0点是在我们的左上角，后面两个是结束点的坐标，也就是起始点对角的坐标点。
image.png
如上图所示，那么我们这个区域的热区coords的值就是‘10，10，20，25’
- 接口中给我们的坐标点如何转换成我们项目中的坐标
首先得和后端人员确定下，他们是以什么比例来画的区块。我们这边后端cms系统中是以400的宽度生成的坐标点，那么前端在拿到坐标点后，需要用后端的(默认宽度400)/(屏幕的可视宽度)*(以坐标值)，那么上面的coords的值就是（屏幕可视宽度w = window.innerWidth）10 * (400/w),10 * (400/w),20 * (400/w),25 * (400/w)这个才是我们前端展示的真正的坐标。 - 与图片如何对应
热区和图片一一对应，需要在img标签上设置usemap属性和ismap，然后在map标签上设置相同值的name和id与之对应
<img src='path' usemap='img1' ismap>
<map name='img1' id='img1'>
<area coords="x,x,x,x">
</map>
如上步骤，在area标签上加href属性跳转或者加click事件跳转，就能实现热区效果了。
3. 封装成vue组件
- 从上面步骤我们可以发现，基本上map是不会变动的变动的只是area，如果有多个热区的新增area就可以了。那么vue中我们可以通过v-for来遍历我们热区块。
- 封装通用组件
template:
<template>
<div>
<slot name="img" :usemap="usemap">
<map :name="usemap" :id="usemap">
<area :coords="coords(p)" v-for="(p, i) in item.props" :key="i">
</map>
</div>
</template>
js:
function* nextId() {
let index = 0;
while(true) {
yield index++;
}
}
let mapAreaId = nextId();
export default {
data(){
return {
index: 0
}
},
props: {
configDefaultWth: { // 后端默认宽度
type: [Number],
default: 400
},
id: { // 热区id
type: String,
default: 'id'
}
item: {
type: [Object],
default(){
return {
props: [
"rightBottomSpot":"401,304",
"leftTopSpot":"0,0", // 坐标
"link":"B", // 跳转地址
]
}
}
}
...
},
mounted () {
this.index = mapAreaId.next().value;
},
methods: {
coords(item){
return 计算的坐标值
}
}
}
使用：
生成一个轮播图热区
<swipe>
<swipe-item v-for="(item, index) in componentConfig.props" :key="index" >
<mapAreaImg :item="item" :id="item.componentType">
<template slot="img" slot-scope="slotProps">
<img :src="imgPath+item.urlPath" :usemap="slotProps.usemap" ismap alt="" srcset="">
</template>
</mapAreaImg>
<swipe-item>
</swipe>
普通热区
<mapAreaImg :item="item" :id="item.componentType">
<template slot="img" slot-scope="slotProps">
<img :src="imgPath+item.urlPath" :usemap="slotProps.usemap" ismap alt="" srcset="">
</template>
</mapAreaImg>
到此一个vue的热区组件就封装完了，之所以想用slot-scope而不是直接传一个img的src到组件中去，是想着图片可以受父组件控制。如果本文对你有所帮助，可以帮忙点个小爱心，如果有不对的地方望大佬们多加指点，康桑密达！
