图片滚动缩放并支持拖拽

该功能在Vue2 的element-UI中还是比较鸡肋的 Element-UI

该功能在Emenent-UI-plus（vue3）版本已经很好的支持了。 完整功能如下link Element-Plus的Image标签

第一步、实现图片鼠标拖拽

鼠标事件

onmouseup : 按键弹起事件
onmousemove ：鼠标移动事件
onmousedown ：鼠标按下事件

功能流程：

1. 给 需要移动的盒子 添加鼠标按下事件 ： onmousedown 盒子要添加绝对定位 。
2. 并且给全局(window)注册鼠标移动事件 ： onmousemove
3. 给需要移动的盒子添加鼠标距离左侧和顶部的长度
4. 在鼠标按键松开后把全局注册的鼠标事件移除 (到此拖拽的功能基本完成)

这里如果使用的是img标签作为图片展示的话， 一定要把img上的长按拖拽事件先去除，要不然就会出现BUG

const divMove = document.querySelector('div')
divMove.onmousedown = function (e) {
  window.onmousemove = function (event) {
    divMove.style.left=event.clientX-e.target.offsetWidth/2+'px'
    divMove.style.top=event.clientY-e.target.offsetHeight/2+'px'
  }
}
divMove.onmouseup=function(){
  window.onmousemove =null
}

第二步、实现滚动缩放

鼠标事件

onwheel : wheel当用户旋转定点设备（通常是鼠标）上的滚轮按钮时会触发该事件。(现在主流的浏览器都支持该事件)

功能流程

1. 获取需要放大缩小的盒子DOM 给盒子绑定onwheel事件（这个事件里面存在在谷歌和火狐上放大和缩小的Api不准确，建议先尝试确认下）
2. 给需要放大缩小的盒子DOM 添加Css样式 scale控制图片的缩放

//scale是为了控制图片大小为正常渲染
let  scale = 1
divMove.onwheel=function(e){
	if(e.wheelDelta>0){
		scale+=0.05
		divMove.style.transform=`scale(${scale})`
	}else{
		scale-=0.05
		divMove.style.transform=`scale(${scale})`
	}
}

如何消除图片默认拖拽

可以使用background-image代替img标签

可以使用img标签添加css的属性解决这个问题