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 / 120if (e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {this.scale += 0.2 * speedthis.$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 * speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}}},dragMousedown(event) {this.moveStart.x = event.clientXthis.moveStart.y = event.clientYthis.isMousedown = true},dragMousemove(event) {if (this.isMousedown) {this.translate.x += (event.clientX - this.moveStart.x) / this.scalethis.translate.y += (event.clientY - this.moveStart.y) / this.scalethis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`this.moveStart.x = event.clientXthis.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>
