image-map-dd

image-map

Project setup

npm install image-map-dd

In Vue main.js

import ImageMap from 'image-map-dd'

Vue.use(ImageMap)

In you want to use .vue file

    <template>
        <div>
            <ImageMap></ImageMap>
        </div>
    </template>

prop

• value,width,is_edit,min_size

    <template>
        <div>
            <ImageMap :value="value" :width="width" :is_edit="is_edit" :min_size="min_size"></ImageMap>
        </div>
    </template>
    <script>
        export default {
            name: 'page_name',
            data() {
                return {
                    value:{
                        uuid:0001, // 表示唯一值
                        source:'https://img2.baidu.com/it/u=2116933009,657087104&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=500', // 图片资源
                        zones:[
                            {
                                w:100, // 热点区域宽
                                h:200, // 热点区域高
                                x:100, // 热点区域左上角X坐标
                                y:100, // 热点区域左上角Y坐标
                                i:1, // 热点区域层级优先级，数字越大，优先级越高
                                link:'www.baidu.com' // 热点区域响应链接
                            }
                        ]
                    },
                    is_edit:true, // 是否是编辑区域，默认是
                    min_size: 40 // 单个热点区域最小宽高，默认40，number类型
                    width:600 // 图片区域宽度，实际显示宽度要根据这个宽度来计算热点区域的缩放 ，默认600 number类型
                }
            }
        }
    </script>

• method changeData 数据编辑后回调方法 value同prop中value，会多width和height

    <template>
        <div>
            <ImageMap @changeData="changeData"></ImageMap>
        </div>
    </template>
    <script>
        export default {
            methods:{
                changeData(value){
                }
            }
        }
    </script>