vue实现图片旋转，放大缩小及拖动功能

<template>
	<div>
		<div class="uploadfile-showImg" @mousewheel="bbimg(this)">
			<div class="setting_box img-footer">
				<div @click="rotate()">旋转</div>
				<div @click="imgOut()">还原</div>
			</div>
			<img :src="imgUrl" alt="" class="imgclass" :style="test " @mousedown="imgMove" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				imgUrl: 'https://img1.baidu.com/it/u=3955310150,3274562539&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=89b775b8e5cf0ff132c2d7346ecf130e',
				deg: 0,
				test: '',
				zoomInShow: false,
				params: {
					zoom: 1,
					left: 0,
					top: 0,
					currentX: 0,
					currentY: 0,
					flag: false,
				}
			}
		},
		methods: {
			// 鼠标滚轮滚动实现图片放大缩小 
			bbimg(ev) {
				let e = ev || window.event
				this.params.zoom += e.wheelDelta / 1200
				if (this.params.zoom >= 0.2) {
					this.test = `transform:scale(${this.params.zoom}) rotateZ(${this.deg}deg);`
				} else {
					this.params.zoom = 0.2
					this.test = `transform:scale(${this.params.zoom}) rotateZ(${this.deg}deg);`
					return false
				}
			},
			// 实现图片拖拽
			imgMove(e) {
				let oImg = e.target
				let disX = e.clientX - oImg.offsetLeft
				let disY = e.clientY - oImg.offsetTop
				document.onmousemove = (e) => {
					e.preventDefault()
					let left = e.clientX - disX
					let top = e.clientY - disY
					this.test = this.test + `left: ${left}px;top: ${top}px;`
				}
				document.onmouseup = (e) => {
					document.onmousemove = null
					document.onmouseup = null
				}
			},
			// 旋转
			rotate() {
				this.deg += 90
				if (this.deg >= 360) {
					this.deg = 0
				}
				this.test = `transform: rotateZ(${this.deg}deg)`
			},
			// 还原
			imgOut() {
				this.deg = 0
				this.params = {
					zoom: 1,
					left: 0,
					top: 0,
					currentX: 0,
					currentY: 0,
					flag: false,
				}
				this.test = `transform: rotateZ(0deg)`
			},
		}
	}
</script>
<style>
	.uploadfile-showImg {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 1);
		position: fixed;
		z-index: 20;
		margin: 0 auto;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.setting_box {
		width: 100%;
		line-height: 30px;
		font-size: 16px;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		bottom: 5%;
		z-index: 999;
		display: flex;
		align-content: center;
		justify-content: center;
	}

	.img-footer {
		display: flex;
		align-content: center;
		justify-content: center;
	}

	.img-footer div {
		background-color: #2696ee;
		padding: 10px 20px;
		color: #fff;
		margin: 0 10px;
		cursor: pointer;
		border-radius: 10px;
	}

	.imgclass {
		max-width: 95vw;
		max-height: 90vh;
		position: absolute;
		z-index: 22;
		margin-top: 40px;
		cursor: move;
	}
</style>