溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關利用Vue 怎么實現一個鼠標拖拽滾動效果，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
首先給外層加個大大的寬和高：
<div class="vue-drag-scroll-wrapper" :>
// 這里省略一些不太重要的代碼
</div>
<script>
export default {
name: 'VueDragScroll',
props: {
msg: String
},
data () {
return {
scale: 100
}
},
computed: {
zoomStye () {
const INIT_WIDTH = 2208
const INIT_HEIGHT = 1206
const width = INIT_WIDTH * (1 + (100 - this.scale)/100)
const height = INIT_HEIGHT * (1 + (100 - this.scale)/100)
console.log(width)
console.log(height)
return {
width: `${width}px`,
height: `${height}px`,
transform: `scale(${this.scale/100})`
}
}
}
}
</script>這里設置了一個計算屬性 zoomStye，主要使用就是給外層加一個在的寬，和高，這里我還設置了一個縮放比較，為了是能放大縮小頁面，下面講。運行效果：
接著，我們需要監聽鼠標的拖拽來觸發滾動條效果，因為需要對 dom 的操作，所以這里把拖拽處理邏輯用 vue 指令封裝起來，這樣后面有需要，只要使用該指令即可。
注意：在 vue 中如果需要對 dom 進行多次操作，最好是把它封裝在指令中。
指令代碼如下：
import Vue from 'vue'
Vue.directive('dragscroll', function (el) {
el.onmousedown = function (ev) {
console.log(el)
const disX = ev.clientX
const disY = ev.clientY
const originalScrollLeft = el.scrollLeft
const originalScrollTop = el.scrollTop
const originalScrollBehavior = el.style['scroll-behavior']
const originalPointerEvents = el.style['pointer-events']
// auto: 默認值，表示滾動框立即滾動到指定位置。
el.style['scroll-behavior'] = 'auto'
el.style['cursor'] = 'grabbing'
// 鼠標移動事件是監聽的整個document，這樣可以使鼠標能夠在元素外部移動的時候也能實現拖動
document.onmousemove = function (ev) {
ev.preventDefault()
// 計算拖拽的偏移距離
const distanceX = ev.clientX - disX
const distanceY = ev.clientY - disY
el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY)
console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY)
// 在鼠標拖動的時候將點擊事件屏蔽掉
el.style['pointer-events'] = 'none'
document.body.style['cursor'] = 'grabbing'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
el.style['scroll-behavior'] = originalScrollBehavior
el.style['pointer-events'] = originalPointerEvents
el.style['cursor'] = 'grab'
}
}
})這里的主要思路就是利用 el.scrollTo 來觸發滾動條的移到。
有了 dragscroll 指令，我們來使用一下，首先我們需要在增加一層外層：
<div v-dragscroll class="vue-drag-scroll-out-wrapper">
<div class="vue-drag-scroll-wrapper" :>
// 這里省略一些不太重要的代碼
</div>
</div>
<style scoped>
.vue-drag-scroll-out-wrapper{
overflow-x: hidden;
width: 100%;
height: 100%;
cursor: grab;
position: absolute;
top:0;
left: 0;
&::-webkit-scrollbar { width: 0 !important } // 隱藏垂直方向的滾動條
}
</style>這里需要注意的在 .vue-drag-scroll-out-wrapper 要設置 overflow 值，否則無法滾動(測試出來的)。
這樣拖拽效果就出來啦：
這里，我們增加一個視圖的放大和縮小，所以增加兩個按鈕：
<div class="tolbox-zoom-wrapper">
<div class="zoom-inner">
<span class="iconfont iconsuoxiao"
:class="{'disabled': scale === 25}"
@click="handleReduce"
/>
<span class="iconfont iconfangda"
:class="{'disabled': scale === 100}"
@click="handleEnlarge"
/>
<div class="scale-text">{{scale}}%</div>
</div>
</div>效果：
這里的放大和縮小的邏輯就是通過我們增加減少 scale 來實現
handleReduce () {
if (this.scale === 25) return
this.scale -= 25
},
handleEnlarge () {
if (this.scale === 100) return
this.scale += 25
}縮放比例的關系就是開關給出的代碼：
const INIT_WIDTH = 2208 const INIT_HEIGHT = 1206 const width = INIT_WIDTH * (1 + (100 - this.scale)/100) const height = INIT_HEIGHT * (1 + (100 - this.scale)/100)
這個比例是我自己定的，比如現在減少到 75% ，那么最外層的高和寬就要對應的增加原來的 25%，因為縮放就是視野上的縮小，對應的距離就是拉寬。
最后就是使用 CSS 的 transform 來做縮放：
transform: `scale(${this.scale/100})`關于利用Vue 怎么實現一個鼠標拖拽滾動效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
