vue-img-market v2.0.8

vue-plugin

1、在背景图片上点击生成图标，并且通过回调上传坐标 2、可以通过点击为小图标添加数据属性 3、可以添加不同图片作为market标记 4、添加图标描述

Build Setup

# install dependencies
npm install vue-img-market --save

# use
import Market from 'vue-img-market'
Vue.use(Market)

# Configuration item
backUrl:'' String // 背景图片地址
      
open: true, // true代表开发模式 功能可用 false代表生产模式只展示
        customClassName: '', // 图片自定义类名
        fontCustomClassName: '', // market标记图标自定义类名
        fontUrl: '' || [], // market标记图标地址
        coordinate: [], // 坐标
        // coordinate:[{
        //   customClassName:'',//自定义类名
        //   isDesc:false, //当鼠标放在market图标上时 是否显示自定义描述
        //   x:'',//x轴坐标
        //   y:'',//y轴坐标
        //   type:""//当有不同的小图标时即fontUrl为数组类型时 type是不同图标的类型  名称自己取 备注 不能重复 并且和typeArray数组的值对应
        //   url:"" //小图标地址
        // }]
        typeArray: []
        typeArray: [] //类型数组
        // typeArray:[{ //只有当fontUrl为数组时 该字段使用 
        //   key: 'air-monitoring-station',  //不同类型market标记图标的唯一标识  不能重复
        //   name: '空气监测站',  // 名称 类型下拉选择框的展示 可供用户选择 非必须 没有该属性 则会使用key字段
        //   class: 'air-monitoring' // 当当前图标和其他类型图标样式大小不一致时 可添加自定义类名  该属性若不存在 则统一使用fontCustomClassName字段
        // }]

# Event
submit 返回页面上的坐标数组 返回参数arr
singleClick 单价小图标事件 返回当前图标的数据对象 item
mouseenter 鼠标进入小图标事件 
mouseenter 鼠标离开小图标事件 


# solt
小图标可通过solt添加自定义描述 
同时返回当前小图标的数据对象item
 <slot :item="item">
          描述
        </slot>