平台支持使用图像导航界面,例如展示如下一张图,用户点击对应位置触发对应动作

实现原理:

<template>
  <div>
    <img :src="imageUrl" :usemap="imageMapId" @click="handleClick" />

    <map :name="imageMapId">
      <area v-for="(area, index) in areas" :key="index" :shape="area.shape" :coords="area.coords" :href="area.href">
    </map>
  </div>
</template>

核心点在usemap属性

热点数据通过后台接口获取(注意处理权限,没有权限的热点不生成)   

  areas: [
        { shape: 'rect', coords: '0,0,100,100', href: 'page1' },
        { shape: 'circle', coords: '150,150,50', href: 'page2' }
      ]

    handleClick(event) {
      const target = event.target;
      const area = document.elementFromPoint(event.clientX, event.clientY);
      if (area && area.tagName.toLowerCase() === 'area') {
         //处理跳转: area.getAttribute('href');
      }
    }

更多推荐