vue 图片缩放和拖拽

功能介绍：鼠标滚动实现放大或者缩小（未设置缩放最大倍数和最小倍数）；点击图片不放，可拖动图片。

<template>
  <div
    class='preview-img-div'
    ref='previewImgDiv'
    @mousewheel="handleMousewheel"
    @mousedown="handleMouseDown"
  >
    <img
      :src="previewImgUrl"
      :style="{
        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`
      }"
    />
  </div>
</template>
<script>

export default {
	data() {
		return {
			previewImgUrl: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
			scale: 1,
			translateX: 0,
			translateY: 0
		}
	},
	methods: {
		handleMousewheel(event) {
			this.scale = this.scale + event.wheelDelta / 1200
			return false
		},
		handleMouseDown(event) {
			event.preventDefault()
			if (event.target.tagName !== 'IMG') {
				return false
			}
			let div = this.$refs.previewImgDiv
			let originX = event.screenX
			let originY = event.screenY
			let translateX = this.translateX
			let translateY = this.translateY
			const move = (e) => {
				let afterX = e.screenX
				let afterY = e.screenY
				this.translateX = translateX + (afterX - originX) / this.scale
				this.translateY = translateY + (afterY - originY) / this.scale
			}
			div.addEventListener('mousemove', move)
			div.addEventListener('mouseup', () => {
				div.removeEventListener('mousemove', move)
			})
		}
	}
}
</script>

<style lang="less" scoped type="text/less">
.preview-img-div {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>