Vue2，实现图片拖拽、放大、缩小

最新推荐文章于 2024-07-23 16:00:04 发布

背着星星赶太阳

最新推荐文章于 2024-07-23 16:00:04 发布

阅读量1.1k

点赞数 1

文章标签： html servlet javascript

本文链接：https://blog.csdn.net/m0_69874989/article/details/129856008

版权

该代码段展示了一个Vue.js组件，用于创建一个可拖动并支持鼠标滚轮缩放的图片容器。组件包含模板、脚本和样式部分，处理mousedown、mousemove、mouseup以及mousewheel事件，允许用户在界面上移动和缩放图片。

摘要由CSDN通过智能技术生成

html部分

<template>
	<ul class="leadBox">
		<li>
		<img src="../../assets/center/close.png" class="close" @click="leadTo">
		</li>
		<li>
			<div class="drag-outer"
			ref="dragWrap"
			style="width:2822px"
			@mouseenter="isHover = true"
			@mouseleave="isHover = isMousedown = false"
			@mousemove="dragMousemove">
				<div class="drag-inner"
				ref="dragElement"
				@mousedown="dragMousedown"
				@mouseup.stop="isMousedown = false">
					<slot>
						<img src="../../assets/inf/leadData.png" alt="领导团队">
					</slot>
				</div>
			</div>
		</li>
	</ul>
</template>

script部分

<script>
	export default {
		name:"Blead",
		data() {
			return{
				isMousedown: false,
                isHover: false,
                moveStart: {},
                translate: {x: 0, y: 0},
                scale:1,
                imgWidth:'400px',
                scaleZoom:{
                    max: 5,
                    min: 1
                }
			}
		},
		mounted() {
		    window.addEventListener('mousewheel',this.handleScroll,false)
		},
		methods:{
			leadTo(){
				this.bus.$emit("lead1",false)
			},
            handleScroll(e) {
                if (this.isHover) {
                let speed = e.wheelDelta / 120
                if (e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {
                this.scale += 0.2 * speed
                this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                } else if (e.wheelDelta < 0 && this.scale > this.scaleZoom.min) {
                this.scale += 0.2 * speed
                this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                        }
                }
		    },
            dragMousedown(event) {
                this.moveStart.x = event.clientX
                this.moveStart.y = event.clientY
                this.isMousedown = true
            },
            dragMousemove(event) {
                if (this.isMousedown) {
                    this.translate.x += (event.clientX - this.moveStart.x) / this.scale
                    this.translate.y += (event.clientY - this.moveStart.y) / this.scale
                    this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
                    this.moveStart.x = event.clientX
                    this.moveStart.y = event.clientY
                }
            }
		}
	}
</script>

其中dom，div盒子的使用了flex（弹性盒子）

stype部分

<style scoped>
	.leadBox{
		width: 2822px;
		height: 1139px;
		position: absolute;
		margin: auto;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		/* transform: translate(-50%,-50%); */
		background: url(../../assets/inf/LdWindow.png) no-repeat center;
		background-size: 100% 100%;
		z-index: 8;
	}
	.leadBox>li{
		width: 2822px;
		float: left;
	}
	.leadBox>li:nth-of-type(1){
		width: 2822px;
		height: 248px;
		float: left;
	}
	.leadBox>li:nth-of-type(2){
		width: 2822px;
		height: 839px;
		float: left;
	}
	.close{
		width:100px;
		height: 100px;           
		position: absolute;
		right: 20px;
		top: 20px;
		cursor: pointer;
	}
	/* .leadData{
		width: 1095px;
		height: 831px;
		position: absolute;
        cursor: move;
		left:864px;

	} */
    .drag-outer {
	  overflow: hidden;
	  height:831px;
	  float: left;
	  display: flex;
	  justify-content: center;
	  align-items: center;

	}
	.drag-inner {
		transform-origin: center center;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: move;
		user-select: none;
		width:100%;
		height:100%;
		-webkit-user-drag: none;
		
	  }
	img{object-fit:contain; width: 1095px;height: 831px;}
</style>