如何使用Vue實現(xiàn)一個簡單的鼠標(biāo)拖拽滾動效果插件

   // 這里省略一些不太重要的代碼 

這里設(shè)置了一個計算屬性  zoomStye，主要使用就是給外層加一個在的寬，和高，這里我還設(shè)置了一個縮放比較，為了是能放大縮小頁面，下面講。運(yùn)行效果：

接著，我們需要監(jiān)聽鼠標(biāo)的拖拽來觸發(fā)滾動條效果，因為需要對 dom 的操作，所以這里把拖拽處理邏輯用 vue  指令封裝起來，這樣后面有需要，只要使用該指令即可。

注意：在 vue 中如果需要對 dom 進(jìn)行多次操作，最好是把它封裝在指令中。

指令代碼如下：

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: 默認(rèn)值，表示滾動框立即滾動到指定位置。     el.style['scroll-behavior'] = 'auto'     el.style['cursor'] = 'grabbing'     // 鼠標(biāo)移動事件是監(jiān)聽的整個document，這樣可以使鼠標(biāo)能夠在元素外部移動的時候也能實現(xiàn)拖動     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)       // 由于我們的圖片本身有點擊效果，所以需要在鼠標(biāo)拖動的時候?qū)Ⅻc擊事件屏蔽掉       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 來觸發(fā)滾動條的移到。

有了 dragscroll 指令，我們來使用一下，首先我們需要在增加一層外層：

       // 這里省略一些不太重要的代碼