Vue图片热区模板代码（包含热区、点击特效、悬浮特效、旋钮、布局）

<template>
  <div style="width: 100%"onselectstart="return false;">
    <div style="position: relative;">
      <img id="mapAll" ref="mapAll" src="../../../assets/UTA2070Image/Front.png" usemap="#image-map"/>
      <img ref="knob" src="../../../assets/UTA2070Image/knob.png" style="position: absolute;top: 317px; left: 937px;" @wheel="rotateKnob($event)"/>

      <map name="image-map">
        <area v-for="(area, index) in allHotspots" :key="index" :id="area.id" :title="area.title" :coords="area.coords" :shape="area.shape" @click="handleClick(area)" :class="{ 'disabled': !area.clickable }">
      </map>
    </div>
  </div>

</template>
<script>
import $ from "jquery"
import 'jquery/dist/jquery.maphilight'

export default {
  data() {
    return{
      rotationAngle: 0, // 记录当前旋转的角度
      allHotspots: [
        { id: 1, title: 'Power', coords: '150,597,207,641', shape: 'rect', clickable: false },
        { id: 2, title: 'FREQ', coords: '922,77,982,112', shape: 'rect', clickable: false },
        { id: 3, title: 'SPAN', coords: '920,125,982,158', shape: 'rect', clickable: false },
        { id: 4, title: 'AMPT', coords: '920,171,982,207', shape: 'rect', clickable: false },
        { id: 5, title: 'AUTO', coords: '918,221,984,255', shape: 'rect', clickable: false },
        { id: 6, title: 'BW', coords: '1005,76,1053,110', shape: 'rect', clickable: false },
        { id: 7, title: 'Sweep', coords: '1005,126,1052,159', shape: 'rect', clickable: false },
        { id: 8, title: 'Trip', coords: '1005,171,1054,206', shape: 'rect', clickable: false },
        { id: 9, title: 'Meas', coords: '1005,223,1054,256', shape: 'rect', clickable: false },
        { id: 10, title: 'Trace', coords: '1073,77,1122,110', shape: 'rect', clickable: false },
        { id: 11, title: 'Detector', coords: '1073,126,1122,157', shape: 'rect', clickable: false },
        { id: 12, title: 'Display', coords: '1073,174,1122,207', shape: 'rect', clickable: false },
        { id: 13, title: 'MeasSetup', coords: '1073,222,1122,255', shape: 'rect', clickable: false },
        { id: 14, title: 'Marker', coords: '1139,76,1188,109', shape: 'rect', clickable: false },
        { id: 15, title: 'MakerFctn', coords: '1141,126,1190,159', shape: 'rect', clickable: false },
        { id: 16, title: 'Maker→', coords: '1139,174,1190,207', shape: 'rect', clickable: false },
        { id: 17, title: 'Peak', coords: '1139,222,1190,254', shape: 'rect', clickable: false },
        { id: 18, title: 'System', coords: '1213,75,1262,110', shape: 'rect', clickable: false },
        { id: 19, title: 'File', coords: '1214,123,1263,158', shape: 'rect', clickable: false },
        { id: 20, title: 'Save', coords: '1214,170,1263,207', shape: 'rect', clickable: false },
        { id: 21, title: 'Source', coords: '1214,222,1263,257', shape: 'rect', clickable: false },
        { id: 22, title: 'Preset', coords: '1282,75,1331,110', shape: 'rect', clickable: false },
        { id: 23, title: 'PrintSetup', coords: '1282,123,1333,158', shape: 'rect', clickable: false },
        { id: 24, title: 'Help', coords: '1280,171,1331,206', shape: 'rect', clickable: false },
        { id: 25, title: 'Demod', coords: '1280,218,1335,255', shape: 'rect', clickable: false },
        { id: 26, title: 'Cancel(Esc)', coords: '1095,303,1143,334', shape: 'rect', clickable: false },
        { id: 27, title: 'BkSp', coords: '1188,303,1239,334', shape: 'rect', clickable: false },
        { id: 28, title: 'Enter', coords: '1282,299,1333,334', shape: 'rect', clickable: false },
        { id: 29, title: '7', coords: '1093,348,1138,383', shape: 'rect', clickable: false },
        { id: 30, title: '8', coords: '1154,350,1198,383', shape: 'rect', clickable: false },
        { id: 31, title: '9', coords: '1214,350,1259,383', shape: 'rect', clickable: false },
        { id: 32, title: '4', coords: '1093,400,1138,433', shape: 'rect', clickable: false },
        { id: 33, title: '5', coords: '1154,400,1198,433', shape: 'rect', clickable: false },
        { id: 34, title: '6', coords: '1215,400,1260,435', shape: 'rect', clickable: false },
        { id: 35, title: '1', coords: '1093,449,1137,484', shape: 'rect', clickable: false },
        { id: 36, title: '2', coords: '1153,449,1198,484', shape: 'rect', clickable: false },
        { id: 37, title: '3', coords: '1215,449,1260,484', shape: 'rect', clickable: false },
        { id: 38, title: '0', coords: '1093,499,1137,534', shape: 'rect', clickable: false },
        { id: 39, title: '.', coords: '1153,501,1198,534', shape: 'rect', clickable: false },
        { id: 40, title: '+/-', coords: '1215,499,1260,536', shape: 'rect', clickable: false },
        { id: 41, title: 'GHz', coords: '1293,348,1334,383', shape: 'rect', clickable: false },
        { id: 42, title: 'MHz', coords: '1292,400,1335,435', shape: 'rect', clickable: false },
        { id: 43, title: 'kHz', coords: '1292,451,1335,482', shape: 'rect', clickable: false },
        { id: 44, title: 'Hz', coords: '1292,499,1333,532', shape: 'rect', clickable: false },
        { id: 45, title: '↓', coords: '941,499,984,536', shape: 'rect', clickable: false },
        { id: 46, title: '↑', coords: '1001,499,1044,534', shape: 'rect', clickable: false }
      ],

    }
  },
  methods:{
    handleClick(area){
      this.handleHighlight(area.id);
    },
    //点击效果
    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);
    },
    //滚轮调整数值
    rotateKnob(event) {
      // 阻止默认的滚轮事件，以避免页面滚动
      event.preventDefault();
      // 检查滚轮方向
      const delta = Math.sign(event.deltaY);
      const rotateIncrement = 45; // 每次旋转的增量角度
      // 根据滚轮方向进行旋转和数值变化
      if (delta == 1) {
        this.rotationAngle -= rotateIncrement;        //记得写rotationAngle: 0, // 记录当前旋转的角度
        this.$refs.knob.style.transform = `rotate(${this.rotationAngle}deg)`;
      }
      else if (delta == -1) {
        this.rotationAngle += rotateIncrement;
        this.$refs.knob.style.transform = `rotate(${this.rotationAngle}deg)`;
      }
    },

  },
  mounted() {
    $(function() {
      $('#mapAll').maphilight({
        fillColor: 'ff0000',
        strokeColor: "FFFFFF",
        strokeWidth: 3,
        fillOpacity: 0.6,
      });
    });
  },
}



</script>
<style scoped>

</style>