hotspot-vue3 ·

yarn add hotspot-vue3

# or

npm install hotspot-vue3 --save

import Hotspot from "hotspot-vue3";

<template>
  <div class="hotapp">
    <hotspot
      :image="image"
      :zonesInit="zones"
      :types="types"
      :minSize="52"
      :switchOptions="{
        isShowSign: true,
        isShowDelete: true,
        isOverlap: false,
        isShowActive: true
      }"
      :styleOptions="{}"
      @add="handleAdd"
    >
      <!-- <template #sign="{ zone, index }">
        {{ zone }}
        {{ index }}
      </template>
      <template #delete="{ index }">
        {{ index }}
      </template> -->
    </hotspot>
    <div class="hotapp__display">
      <button type="primary" @click="handleAdd">Add hot spots</button>
      <input
        type="text"
        v-for="(zone, index) in zones"
        :key="index"
        v-model="zone.url"
        :placeholder="`Area ${index + 1} url`"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Hotspot from "hotspot-vue3";

type MoreUrl = {
  [key in string | number]: string;
};
interface ZoneType {
  topPer: number;
  leftPer: number;
  widthPer: number;
  heightPer: number;
  url?: string | MoreUrl;
  active?: boolean;
  key?: string;
}

@Options({
  components: {
    Hotspot
  }
})
export default class App extends Vue {
  // image url
  image =
    "https://github.com/shadow-Fiend/readme_image/blob/master/big_fish.jpeg";
  zones = [] as ZoneType[];
  types = "move";

  handleAdd(zon: ZoneType) {
    let zone: ZoneType;
    if (zon.topPer) {
      // If this parameter exists, drag to create a hot zone
      zone = zon;
      zone.url = "https://github.com";
      this.types = "move"; // When Max hot zones exist, verify by dragging or clicking to Max
    } else {
      // Create hot zones with buttons
      zone = {
        heightPer: 0.2027, //20.27%
        leftPer: 0.2027,
        topPer: 0.2027,
        widthPer: 0.1027,
        url: "https://github.com",
        key: String(Math.random())
      } as ZoneType;
      this.types = "btn"; // When Max hot zones exist, verify by dragging or clicking to Max
    }
    this.zones.push(zone); // Hotspot data
  }
}
</script>

<style lang="scss" scoped>
.hotapp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 555px;
  min-width: 1000px;

  &__display {
    margin-top: 24px;

    > input {
      margin-left: 10px;
    }
  }
}
</style>