短信预约-IT技能 免费直播动态提醒

2024-12-03 15:59

关注

"vue-drag-scroll-wrapper" :style="zoomStye"> 
  // 这里省略一些不太重要的代码 

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

"vue-drag-scroll-out-wrapper"> 
 "vue-drag-scroll-wrapper" :style="zoomStye"> 
    // 这里省略一些不太重要的代码