【最近项目小结】使用 Vue 实现一个简单的鼠标拖拽滚动效果插件

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})

}

}

}

}

这里设置了一个计算属性 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 要设置 overflow 值，否则无法滚动(测试出来的)。

这样拖拽效果就出来啦：

增加缩放

这里，我们增加一个视图的放大和缩小，所以增加两个按钮：

<span class=“iconfont iconsuoxiao”

:class=“{‘disabled’: scale === 25}” style=“font-size:22px”

@click=“handleReduce”

/>

<span class=“iconfont iconfangda”

:class=“{‘disabled’: scale === 100}”

@click=“handleEnlarge”

/>

{{scale}}%

效果：

这里的放大和缩小的逻辑就是通过我们增加减少 scale 来实现

handleReduce () {

if (this.scale === 25) return

this.scale -= 25

},

handleEnlarge () {

if (this.scale === 100) return

this.scale += 25

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
9n-1715057240166)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！