Vue+jquery+jquery.maphilight实现图片热区高亮以及点击效果

//鼠标悬浮效果

mounted() {this.setCurrentTask(0);
//对于id为mapAll的热区图，设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量$(function() {$('#mapAll').maphilight({fillColor: 'ff0000',strokeColor: "FFFFFF",strokeWidth: 3,fillOpacity: 0.6,});});
},

//点击效果
handleHighlight(id) {const escapedId = id;const $element = $(`#${escapedId}`);const data = $element.mouseout().data('maphilight') || {};data.alwaysOn = true;data.fillColor = "feeeed";$element.data('maphilight', data).trigger('alwaysOn.maphilight');setTimeout(() => {const data = $element.mouseout().data('maphilight') || {};data.fillColor = "ff0000";data.alwaysOn = false;$element.data('maphilight', data).trigger('alwaysOn.maphilight');}, 300);
},

好的设计思路：

​
<template><div><!-- Task Display --><div><h2>Task {{ currentTask.id }}: {{ currentTask.name }}</h2><p>{{ currentTask.details }}</p><img ref="mapAll" id="mapAll" src="../../assets/images/JIESHOUJI.png" usemap="#image-map"><map v-if="currentHotspots" name="image-map"><area v-for="(area, index) in currentHotspots" :key="index" :id="area.id" :title="area.title" :coords="area.coords" :shape="area.shape" @click="handleClick(area)"></map></div><!-- Global Navigation Buttons --><div><button @click="previousTask" :disabled="currentTaskIndex === 0">Previous</button><button @click="nextTask" :disabled="currentTaskIndex === tasks.length - 1">Next</button></div></div>
</template><script>
import $ from "jquery"
import 'jquery/dist/jquery.maphilight'export default {data() {return {tasks: [{id: 1,name: '开始实验',details: '按On->显示自检->出现屏幕',hotspots: [{ id: 1, alt: 'Power', title: 'Power', coords: '133,34,178,86', shape: 'rect' },{ id: 2, alt: 'LockTest', title: 'LockTest', coords: '1059,150,1096,205', shape: 'rect' }]}// Add more tasks here if needed],currentTaskIndex: 0,currentTask: {},currentHotspots: []};},methods: {setCurrentTask(index) {// Set current task and associated hotspotsthis.currentTaskIndex = index;this.currentTask = this.tasks[index];this.currentHotspots = this.currentTask.hotspots;},previousTask() {// Display previous taskif (this.currentTaskIndex > 0) {this.setCurrentTask(this.currentTaskIndex - 1);}},nextTask() {// Display next taskif (this.currentTaskIndex < this.tasks.length - 1) {this.setCurrentTask(this.currentTaskIndex + 1);}},handleClick(area) {// Handle click event for hotspotconsole.log('Clicked hotspot:', area);this.handleHighlight(area.id)// Add your custom logic here},// maplight处理按钮特效handleHighlight(id) {const $element = $(`#${id}`);const data = $element.mouseout().data('maphilight') || {};data.alwaysOn = true;data.fillColor = "feeeed";$element.data('maphilight', data).trigger('alwaysOn.maphilight');// 使用 setTimeout 来延迟还原状态setTimeout(() => {const data = $element.mouseout().data('maphilight') || {};data.fillColor = "ff0000";data.alwaysOn = false;$element.data('maphilight', data).trigger('alwaysOn.maphilight');}, 300);},},mounted() {// Initialize current task and hotspotsthis.setCurrentTask(0);// 对于id为mapAll的热区图，设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量$(function() {$('#mapAll').maphilight({fillColor: 'ff0000',strokeColor: "FFFFFF",strokeWidth: 3,fillOpacity: 0.6,});});},
};
</script><style scoped>
/* Add styles for task layout */
</style>​