VUE map area coords自适应

<template>
  <div class="imgBox">
    <img ref="img" :src="imgUrl" alt="" usemap="#controlmap">
    <map name="controlmap">
      <area ref="oil" shape="poly" :coords="coordsArr[0]" @click="enter('oil')"/>
      <area ref="ele" shape="poly" :coords="coordsArr[1]" @click="enter('ele')"/>
    </map>
  </div>
</template>

<script>
import CON from '@conf/index'

export default {
  data () {
    return {
      imgUrl: require('@/assets/control.png'),
      coords: ['0,0,878,0,245,818,0,818', '878,0,1200,0,1200,818,245,818'],
      radioArr: [],
      coordsArr: []
    }
  },
  created () {
    this.radioArr = this.coords.map(str => {
      return str.split(',').map((item, index) => {
        if (index % 2 === 0) {
          return parseInt(item) / 1200 // 图片宽度
        } else {
          return parseInt(item) / 818 // 图片高度
        }
      })
    })
  },
  mounted () {
    window.onresize = () => {
      const imgWidth = this.$refs.img.width
      const imgHeight = this.$refs.img.height

      this.coordsArr = this.radioArr.map(arr => {
        return arr.map((item, index) => {
          if (index % 2 === 0) {
            return Math.round(imgWidth * item)
          } else {
            return Math.round(imgHeight * item)
          }
        })
      })
    }
    window.onresize()
  },
  methods: {
    enter (val) {
      switch (val) {
        case 'oil':
          this.$router.push({ path: '/user/connect', query: { code: 31 } })
          break
        case 'ele':
          window.location.href = `${CON.KD_URL}/user/connect`
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.imgBox {
  img {
  width: 100%;
  height: calc(100vh - 100px);
  background-size: cover;
  }
  map {
    area {
      cursor: pointer;
    }
  }
}
</style>