hotspot-vue3 ·

A hot zone generation tool for VUE3 + TS projects 中文文档

Try out the demo!

Plug-in installation

yarn add hotspot-vue3

# or

npm install hotspot-vue3 --save

The plug-in USES

• Introduced in the business component file

import Hotspot from "hotspot-vue3";

• In your business code, use it as a normal component

<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>

Parameters that

As shown in the sample code, import this component directly, and control all other functions through properties.

Here's what each property means:

Hotspot Attributes

Attribute	Description	Type	Accepted Values	Default
image	Url address of heat base map	String
zonesInit	Hot zone content, in array form	Array	topPer、leftPer、widthPer、heightPer、url、active、key
max	That is, the maximum number of displays in the current hot zone. If you do not set this parameter, it can be added indefinitely	Number
types	The way to add hot areas	String	move: Generated by dragging the mouse, btn: Generated by custom button click
switchOptions	Hot zone switch properties	Object	isShowSign、isShowDelete、isOverlap、isShowActive
styleOptions	Hot zones display some color value properties	Object	zoneBorderColor、zoneBgColor、zoneActiveBgColor

ZonesInit Atributes

Attribute	Description	Type	Accepted Values	Default
topPer	Distance from the top as a percentage of the total area	Number
leftPer	Distance to the left as a percentage of the total area	Number
widthPer	Percentage of hot zone width in total area	Number
heightPer	Percentage of hot zone height to total area	Number
url	Hot area link address, you can define your own object to save more parameters	String / any
active	Hot zone activation state	Boolean / undefined		false / undefined
key	Hot zone key, used for unique identification	String		Math.random()

SwitchOptions Atributes

Attribute	Description	Type	Accepted Values	Default
isShowSign	Whether to display hot zone signs	Boolean		true
isShowDelete	Whether to display the hot zone deletion sign	Boolean		true
isOverlap	Whether coverage is allowed between hot zones	Boolean		false
isShowActive	Click the hot zone to see if the active status is displayed	Boolean		true

StyleOptions Atributes

Attribute	Description	Type	Accepted Values	Default
zoneBorderColor	Hot zone border color	String		#507bfb
zoneBgColor	Hot area background color	String		rgba(80, 123, 251, 0.1)
zoneActiveBgColor	Hot zone background color in active state. This color takes effect only when isShowActive is true	String		rgba(80, 123, 251, 0.4)

Write in the last

At this point, all the ways to use the plug-in are covered.

This plugin only supports vue3.x projects...

For more information about the source of the plugin, please visit the GitHub plugin repository：hotspot-vue3