开发指南073-图片热点
/处理跳转: area.getAttribute('href');平台支持使用图像导航界面,例如展示如下一张图,用户点击对应位置触发对应动作。热点数据通过后台接口获取(注意处理权限,没有权限的热点不生成)核心点在usemap属性。
平台支持使用图像导航界面,例如展示如下一张图,用户点击对应位置触发对应动作
实现原理:
<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');
}
}
更多推荐
所有评论(0)