vue-hotspot是图像注释组件，可向您的图像添加带有工具提示的交互式热点。

如何使用它：

导入组件。

import VueHotspot from 'vue-hotspot'

注册组件。

Vue.component('v-hotspot', VueHotspot)

将组件插入模板。

<template>
  <v-hotspot
    :init-options="hotspotConfig"
    @save-data="saveData"
    @after-delete="afterDelete" />
</template>

使用组件。

export default {
  components: {
    'v-hotspot': VueHotspot
  },
  data () {
    return {
      hotspotConfig: {
        image: 'your-image-url.png',
        editable: true,
        interactivity: 'hover'
      }
    }
  },
  methods: {
    saveData (data) {
      // 处理热点列表
      console.log(data)
    },
    afterDelete () {
      // 删除后执行操作
      console.log('删除后执行操作')
    }
  }
}

默认配置。

// 保存热点数据点的对象
data: [],

// 默认图片占位符
image: 'https://via.placeholder.com/600x500',

// 指定要在其中使用插件的可编辑项
// `true`: 允许从UI创建热点
// `false`: 显示“ data”对象中的热点
editable: true,

// 热点数据点将显示的事件
// 允许的值：“ click”，“ hover”，“ none”
interactivity: 'hover',

// 热点模式
schema: [
{
  'property': 'Title',
  'default': '这是标题'
},
{
  'property': 'Message',
  'default': '这是Vue热点组件，可用于创建热点。 '
}]