如何使用Vue实现一个简单的鼠标拖拽滚动效果插件

   // 这里省略一些不太重要的代码 

这里设置了一个计算属性  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 指令，我们来使用一下，首先我们需要在增加一层外层：

       // 这里省略一些不太重要的代码