实现一个Vue图片热区组件

目前在做的电商项目是通过cms系统生成了页面配置的json文件来前端渲染页面，其中有一个热区组件，通过给图片画区域，然后用户点击不同区域跳转到不同的页面去浏览。

1.如何实现热区

当时想到的方法是通过定位根据json里面的配置的坐标点来画盒子。然后对这个盒子加一个点击事件。想到这种方式去实现有点耗时间，先排除，去找度娘。通过度娘我们发现，html是自带有热区的标签的map和area。心情一下子就舒畅了起来，我们的宗旨是能少敲点代码就尽量不多敲一个字母。

2.愉快的实现我们的热区组件

1. 通过查询了解到一个热区map会生成一系列的area，这个area就是每一块的小热区块。area元素有一个coords属性，这个属性值是这个方形的坐标点。同时我们需要给area标签上设置shape="rect"。

2. coords属性的值如何排列
   coords的值是4个，分别是由，号隔开。前两个表示起始点的坐标，我们在浏览器页面中坐标系的0点是在我们的左上角，后面两个是结束点的坐标，也就是起始点对角的坐标点。

   
   
   image.png
   
   

   如上图所示，那么我们这个区域的热区coords的值就是‘10，10，20，25’

3. 接口中给我们的坐标点如何转换成我们项目中的坐标
   首先得和后端人员确定下，他们是以什么比例来画的区块。我们这边后端cms系统中是以400的宽度生成的坐标点，那么前端在拿到坐标点后，需要用后端的(默认宽度400)/(屏幕的可视宽度)*(以坐标值)，那么上面的coords的值就是（屏幕可视宽度w = window.innerWidth）10 * (400/w),10 * (400/w),20 * (400/w),25 * (400/w)这个才是我们前端展示的真正的坐标。
4. 与图片如何对应
   热区和图片一一对应，需要在img标签上设置usemap属性和ismap，然后在map标签上设置相同值的name和id与之对应

如上步骤，在area标签上加href属性跳转或者加click事件跳转，就能实现热区效果了。

3. 封装成vue组件

1. 从上面步骤我们可以发现，基本上map是不会变动的变动的只是area，如果有多个热区的新增area就可以了。那么vue中我们可以通过v-for来遍历我们热区块。
2. 封装通用组件
   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 计算的坐标值
    }
  }
}

使用：

生成一个轮播图热区

  
      
        
      
  


普通热区

   

到此一个vue的热区组件就封装完了，之所以想用slot-scope而不是直接传一个img的src到组件中去，是想着图片可以受父组件控制。如果本文对你有所帮助，可以帮忙点个小爱心，如果有不对的地方望大佬们多加指点，康桑密达！