<template> <div> <div class="popup" v-if="showPopup"> <detail-dialog :visible="showPopup" :kind="season" @exitDialog="exitDialog" /> </div> <img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" /> <map name="pmap" id="pmap"> <area v-for="(item, index) in areaData" :key="index" shape="rect" :coords="item.coords" @click="handleClick(item.alt)" :alt="item.alt" /> </map> </div> </template> <script> import DetailDialog from "../components/detailDialog.vue"; export default { components: { DetailDialog, }, data() { return { imgSrc: require("../assets/img/cxxx.png"), showPopup: false, season: "", areaData: [ { coords: "0,0,742,213", alt: "rawMaterial", }, { coords: "0,231,307,476", alt: "fuel", }, { coords: "334,332,786,623", alt: "clinker", }, ], }; }, methods: { // close dialog exitDialog() { this.showPopup = false; }, // mouseclick action handleClick(season) { this.season = season; this.showPopup = true; }, }, }; </script>
参考网站——HTML图片热区map area的用法 -- 简明现代魔法 (nowamagic.net)
0.需求
点击同一张图片不同区域有不同反馈
1.思路
用HTML的<map>与<area>标签来解决,因为有比较多的重复的就做了个数组扔进去。
<img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" /> <map name="pmap" id="pmap"> <area v-for="(item, index) in areaData" :key="index" shape="rect" :coords="item.coords" @click="handleClick(item.alt)" :alt="item.alt" /> </map>
// data
这个coords是x1,y1,x2,y2,左上角和右下角坐标值,用PS取值
areaData: [ { coords: "0,0,742,213", alt: "rawMaterial", }, ]
2.升级之SVG热图问题
划区域用的AI
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1373px" height="832px" viewBox="0 0 1373 832" style="enable-background: new 0 0 1373 832" xml:space="preserve" > <image style="overflow: visible" width="1373" height="832" xlink:href="../assets/carbonBg.png" ></image> <g @click="onSvg('group')"> <rect class="tongAn" x="934" y="59" style="fill: #ffffff" width="40" height="42" /> <rect class="tongAn" x="934" y="401" style="fill: #ffffff" width="40" height="41" /> <rect class="tongAn" x="792" y="668" style="fill: #ffffff" width="49" height="40" /> <rect class="tongAn" x="798" y="739" style="fill: #ffffff" width="43" height="39" /> </g> <rect class="tongAn" y="7" @click="onSvg('origin')" style="fill: #ffffff" width="401" height="208" /> <rect class="tongAn" x="296" y="300" @click="onSvg('rect')" style="fill: #ffffff" width="455" height="314" /> </svg>
注意,实现边框线在CSS样式中
#clipped { margin-bottom: 20px; } .tongAn { fill: #fefefe; fill-opacity: 0.01; &:hover { cursor: pointer; stroke: #d70000; stroke- 4px; } }
如此便可实现,鼠标悬浮对应区域变化,还可以自己加动作。