vue 圖片拖拽和滾輪縮放
阿新 • • 發佈:2020-12-14
這裡注意如果自己的頁面有滾動條,一定阻止滾動事件的預設行為,否則縮放圖片的時候,頁面會跟著滾動
@mousewheel.prevent 阻止預設行為
<div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap"> <img ref="img" :src="fullscreenImgSrc" @mousedown="moveImg" alt="大圖" class="modal-img"/> </div>
javascript
moveImg (e) { e.preventDefault()// 獲取元素 let imgWrap = this.$refs.imgWrap let img = this.$refs.img let x = e.pageX - img.offsetLeft let y = e.pageY - img.offsetTop // 新增滑鼠移動事件 imgWrap.addEventListener('mousemove', move) function move (e) { img.style.left = e.pageX - x + 'px' img.style.top= e.pageY - y + 'px' } // 新增滑鼠抬起事件,滑鼠抬起,將事件移除 img.addEventListener('mouseup', () => { imgWrap.removeEventListener('mousemove', move) }) // 滑鼠離開父級元素,把事件移除 imgWrap.addEventListener('mouseout', () => { imgWrap.removeEventListener('mousemove', move) }) }, rollImg () {/* 獲取當前頁面的縮放比 若未設定zoom縮放比,則為預設100%,即1,原圖大小 */ let zoom = parseInt(this.$refs.img.style.zoom) || 100 /* event.wheelDelta 獲取滾輪滾動值並將滾動值疊加給縮放比zoom wheelDelta統一為±120,其中正數表示為向上滾動,負數表示向下滾動 */ zoom += event.wheelDelta / 12 /* 最小範圍 和 最大範圍 的圖片縮放尺度 */ if (zoom >= 80 && zoom < 500) { this.$refs.img.style.zoom = zoom + '%' } return false }
less
.modal-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; cursor: move; &-wrap { position: relative; width: 960px; height: 560px; overflow: hidden; } }