利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果

發(fā)布時(shí)間：2020-12-10 13:47:16 來源：億速云閱讀：965 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

首先給外層加個(gè)大大的寬和高：

<div class="vue-drag-scroll-wrapper" :>
 // 這里省略一些不太重要的代碼
</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>

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

利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果

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

注意：在 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)聽的整個(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)
   // 在鼠標(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 來觸發(fā)滾動(dòng)條的移到。

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

<div v-dragscroll class="vue-drag-scroll-out-wrapper">
 <div class="vue-drag-scroll-wrapper" :>
  // 這里省略一些不太重要的代碼
 </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 } // 隱藏垂直方向的滾動(dòng)條
}
</style>

這里需要注意的在 .vue-drag-scroll-out-wrapper 要設(shè)置 overflow 值，否則無法滾動(dòng)(測(cè)試出來的)。

這樣拖拽效果就出來啦：

利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果

增加縮放

這里，我們?cè)黾右粋€(gè)視圖的放大和縮小，所以增加兩個(gè)按鈕：

<div class="tolbox-zoom-wrapper">
 <div class="zoom-inner">
 <span class="iconfont iconsuoxiao"
  :class="{'disabled': scale === 25}" 
  @click="handleReduce"
 />
 <span class="iconfont iconfangda"
  :class="{'disabled': scale === 100}"
  @click="handleEnlarge" 
 />
 <div class="scale-text">{{scale}}%</div>
 </div>
</div>

效果：

利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果

這里的放大和縮小的邏輯就是通過我們?cè)黾訙p少 scale 來實(shí)現(xiàn)

handleReduce () {
 if (this.scale === 25) return
 this.scale -= 25
},
handleEnlarge () {
 if (this.scale === 100) return
 this.scale += 25
}

縮放比例的關(guān)系就是開關(guān)給出的代碼：

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)

這個(gè)比例是我自己定的，比如現(xiàn)在減少到 75% ，那么最外層的高和寬就要對(duì)應(yīng)的增加原來的 25%，因?yàn)榭s放就是視野上的縮小，對(duì)應(yīng)的距離就是拉寬。

最后就是使用 CSS 的 transform 來做縮放：

transform: `scale(${this.scale/100})`

關(guān)于利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

利用Vue 怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖拽滾動(dòng)效果

增加縮放

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽