vue-draggable-resizable 可拖拽缩放组件使用总结

最近有一个需求，可在背景图片上添加热区，然后在h5页面可点击区域进行跳转或者领券或者视频播放。

实现思路：

1、利用vue-draggable-resizable 组件 记录热区的X轴坐标、Y轴坐标、热区的宽度和高度

2、h5页面利用<map> <area> 标签标记，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。（下一篇会讲到h5页面的热区渲染）

实现方法：

1、在vue项目中安装：

 npm install --save vue-draggable-resizable

2、全局注册组件main.js中写入：

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3、局部注册：在使用的组件里引用

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

4、