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 hotspots
      this.currentTaskIndex = index;
      this.currentTask = this.tasks[index];
      this.currentHotspots = this.currentTask.hotspots;
    },
    previousTask() {
      // Display previous task
      if (this.currentTaskIndex > 0) {
        this.setCurrentTask(this.currentTaskIndex - 1);
      }
    },
    nextTask() {
      // Display next task
      if (this.currentTaskIndex < this.tasks.length - 1) {
        this.setCurrentTask(this.currentTaskIndex + 1);
      }
    },
    handleClick(area) {
      // Handle click event for hotspot
      console.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 hotspots
    this.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>