vue移动端滚动插件,vue拖拉拽插件
本文主要介绍vue实现一个简单的鼠标拖拽滚动效果插件，帮助你更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。
最近一个Vue组件开源，还不够完善。欢迎大家一起改进，也希望大家给个明星支持。谢谢你。
Github地址：github.com/qq449245884…
最近在做一个新项目，有这样的需求：
简单来说，鼠标拖动页面，整个页面会随着鼠标的拖动而移动。如果页面中有内容，里面的内容也需要随着拖动的外层整体移动。
一开始没有什么想法，就发了朋友圈，得到了相当多的回答，主要是拖拽，但是这个拖拽只是单个元素的拖拽，我想要的整个视图的拖拽。
线索又在这里断了。
于是我又回到了舒菲有类似功能的页面，然后仔细检查了其页面的DOM结构，如下图：
找到这一层，它设置页面的宽度和高度。为了隐藏滚动条，它设置了溢出：隐藏；看完这个设定，突然恍然大悟。是用拖放来触发滚动条的滚动吗？我正在考虑。哇，这个想法可行，NB。
准备上手试试
创建一个vue项目，所以我就不赘述了。我已经在github上发布了原始代码，我有兴趣亲自看看：
https://github.com/qq449245884/vue-drag-scroll
首先增加外层的宽度和高度：
div class= vue-drag-scroll-wrapper :style= zoomStye
//这里省略了一些不太重要的代码
/div
脚本
导出默认值{
名称： VueDragScroll ，
道具：{
消息：字符串
},
data () {
返回{
比例：100
}
},
计算值：{
zoomStye () {
const INIT_WIDTH=2208
const INIT_HEIGHT=1206
const WIDTH=INIT _ WIDTH *(1(100-this . scale)/100)
常量高度=INIT _ HEIGHT *(1(100-this . scale)/100)
console.log(宽度)
console.log(高度)
返回{
宽度：` ${width}px `，
高度：` ${height}px `，
transform:` scale($ { this . scale/100 })
}
}
}
}
/脚本
这里设置了一个计算属性zoomStye，主要用于在外层增加一个已有的宽度和高度。在这里，我还设置了一个缩放比较，以便放大和缩小页面。下面就来说说吧。操作效果：
然后，我们需要监控鼠标的拖动来触发滚动条效果。因为我们需要操作dom，所以我们在这里用vue指令封装了拖放处理逻辑，这样以后需要的时候就可以直接用这个指令了。
注意：如果需要在vue中多次操作dom，最好封装在指令中。
指令代码如下：
从“vue”导入Vue
Vue.directive(dragscroll ，function (el) {
el.onmousedown=function (ev) {
console.log(el)
const disX=ev.clientX
const disY=ev.clientY
const originalScrollLeft=El . scroll left
const originalScrollTop=El . scroll top
const originalScrollBehavior=El . style[ scroll-behavior ]
const originalPointerEvents=El . style[ pointer-events ]
//auto:默认值，表示滚动框立即滚动到指定位置。
El . style[ scroll-behavior ]= auto
el.style[cursor]=抓取
//鼠标移动事件是被监控的整个文档，这样鼠标在元素外移动时就可以被拖动。
document . onmousemove=function(ev){
ev.preventDefault()
//计算拖动的偏移距离。
const distanceX=ev.clientX - disX
const distanceY=ev.clientY - disY
El . scroll to(originalScrollLeft-distance ex，originalScrollTop-distance ey)
console . log(originalScrollLeft-distance ex，originalScrollTop-distance ey)
//拖动鼠标时屏蔽click事件。
el.style[指针事件]=无
document.body.style[cursor]=抓取
}
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
El . style[ scroll-behavior ]=originalScrollBehavior
El . style[ pointer-events ]=originalPointerEvents
el.style[光标]=抓取
}
}
})
这里的主要思想是使用El . scroll来触发滚动条移动。
有了dragscroll指令，就用它吧。首先，我们需要添加一个外层：
div v-drag scroll class= vue-drag-scroll-out-wrapper
div class= vue-drag-scroll-wrapper :style= zoomStye
//这里省略了一些不太重要的代码
/div
/div
样式范围。vue-拖动-卷出-包装{
溢出-x:隐藏；
宽度：100%；
身高：100%；
光标：抓取；
位置：绝对；
top:0；
左：0；
:-WebKit-滚动条{ width: 0！重要信息} //隐藏垂直方向的滚动条
}
/风格
这里应该注意，溢出值应该设置在。vue-drag-scroll-out-wrapper，否则无法滚动(测试)。
于是拖放的效果就出来了：
增加缩放
这里，我们增加了视图的放大和缩小，所以添加了两个按钮：
div class=tolbox-zoom-wrapper
div 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
效果：
这里的缩放逻辑是通过增加和减少尺度来实现的。
handleReduce () {
if (this.scale===25)返回
this.scale -=25
},
handleEnlarge () {
if (this.scale===100)返回
this.scale=25
}
比例关系是开关给出的代码：
const INIT_WIDTH=2208
const INIT_HEIGHT=1206
const WIDTH=INIT _ WIDTH *(1(100-this . scale)/100)
常量高度=INIT _ HEIGHT *(1(100-this . scale)/100)
这个比例是我自己定的。比如现在缩小到75%，那么最外层的高度和宽度就会相应增加25%，因为变焦就是视野的缩小，对应的距离就是加宽。
最后，CSS的变换用于缩放：
transform:` scale($ { this . scale/100 })
最终效果：
目前这只是简单的排版。大家根据自己的需求布局。在这里，主要分享一些想法。如果你有好的想法，请留言分享。
没有办法知道代码实时部署后可能存在的bug。之后为了解决这些bug，在日志调试上花了大量的时间。这里顺便推荐一个简单易用的bug监控工具Fundebug。
以上是vue实现一个简单的鼠标拖拽插件的细节。更多关于Vue的鼠标拖拽插件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。