【最近項目小結】使用 Vue 實現一個簡單的鼠標拖拽滾動效果插件

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。**

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

演示事例

http://www.longstudy.club/vue...

最近在作一個新的項目，有個須要是這樣的：

簡單描述一下，就是鼠標拖動頁面，整個頁面會隨着的鼠標的拖拽而移動，若是頁面有內容，裏面的內容也須要跟着拖動的外層總體移到。

一開始沒啥思路，因此就發了個朋友圈，獲得的答案挺多的，主要仍是用拖拽之類的，但這個拖拽只是單個元素的拖動，我想要的整個視圖的拖動。

這裏線索又斷了。

因而又回到飛書有相似功能的頁面，而後仔細檢查一下它頁面的 DOM 結構，以下所示：

發現有這一層，它把頁面設置的很寬，很高，爲了隱藏滾動條，因此設置overflow: hidden;，看了這一設置，忽然靈光一現，難道它是用拖拽來觸發滾動條的滾動，在細想，哇靠，這思路可行的，NB。

準備上手試試

建立一個 vue 項目，這個就不細說的，我已經把原碼發佈到 github 上了，有興趣本身看看：

https://github.com/qq44924588...

首先給外層加個大大的寬和高：

<div class="vue-drag-scroll-wrapper" :style="zoomStye">
  // 這裏省略一些不過重要的代碼
</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" :style="zoomStye">
    // 這裏省略一些不過重要的代碼
  </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}" style="font-size:22px"
    @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})`

最終的效果：

當前這個只是簡單的一個排版，你們根據本身須要佈局，這裏主要仍是分享一些思路，若是你們有好的思路，歡迎留言分享。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索【大遷世界 】第一時間閱讀，回覆【福利】有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。