如何使用Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鼠標(biāo)拖拽滾動(dòng)效果插件

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

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

接著，我們需要監(jiān)聽(tīng)鼠標(biāo)的拖拽來(lái)觸發(fā)滾動(dòng)條效果，因?yàn)樾枰獙?duì) dom 的操作，所以這里把拖拽處理邏輯用 vue  指令封裝起來(lái)，這樣后面有需要，只要使用該指令即可。

注意：在 vue 中如果需要對(duì) 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)值，表示滾動(dòng)框立即滾動(dòng)到指定位置。     el.style['scroll-behavior'] = 'auto'     el.style['cursor'] = 'grabbing'     // 鼠標(biāo)移動(dòng)事件是監(jiān)聽(tīng)的整個(gè)document，這樣可以使鼠標(biāo)能夠在元素外部移動(dòng)的時(shí)候也能實(shí)現(xiàn)拖動(dòng)     document.onmousemove = function (ev) {       ev.preventDefault()       // 計(jì)算拖拽的偏移距離       const distanceX = ev.clientX - disX       const distanceY = ev.clientY - disY        el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY)       console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY)       // 由于我們的圖片本身有點(diǎn)擊效果，所以需要在鼠標(biāo)拖動(dòng)的時(shí)候?qū)Ⅻc(diǎn)擊事件屏蔽掉       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 來(lái)觸發(fā)滾動(dòng)條的移到。

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

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