vue 浮动按钮,vue移动端左右滑动插件
这篇文章主要为大家详细介绍了某视频剪辑软件项目实现按钮可随意移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件项目中实现按钮可随意移动，供大家参考，具体内容如下
组件代码如下：
在项目中引入该组件即可
模板
div v-show= hide class= move-button ref= move BTN
@mousedown=btnDown
@touchstart=btnDown
@mousemove=btnMove
@touchmove=btnMove
@mouseup=btnEnd
@touchend=btnEnd
@touchcancel=btnEnd
按钮-维护bg
/div
/div
/模板
脚本
导出默认值{
名称：移动按钮，
data() {
返回{
隐藏：真的，
img:require( @/assets/img/move按钮。png’)，
标志：假，
职位：{
x: 0，
y: 0
},
nx: ，
纽约： ,
dx: ，
死亡： ,
xPum: ，
yPum: ，
isShow:假，
moveBtn: {}，
计时器：空，
当前顶部：0
}
},
已安装(){
this.moveBtn=this .$ refs.moveBtn
窗户。addevent侦听器( scroll ，this。隐藏按钮)；
},
销毁前(){
窗户。addevent侦听器( scroll ，this。隐藏按钮)；
},
方法：{
hideButton() {
这个。timercleartimeout(这个。定时器)；
this.timer=setTimeout(()={
这个。handlescrollend()；
},300);
这个。当前顶部=文档。文档元素。向上滚动 文档。身体。滚动顶部；
this.hide=false
},
handleScrollEnd(){
让顶部滚动=文档。文档元素。向上滚动 文档。身体。滚动顶部；
if(scroll top===this。当前顶部){
this.hide=true
清除超时(这。定时器)；
}
},
//实现移动端拖拽
btnDown() {
this.flags=true
让触摸；
if (event.touches) {
触摸=事件。触摸[0]；
}否则{
触摸=事件；
}
这个。位置。x=触摸。clientx
这个。位置。y=触摸。客户关系；
这个。dx=这个。移动BTN。向左偏移；
这个。dy=这个。移动BTN。offsettop
},
btnMove() {
if (this.flags) {
让触摸；
if (event.touches) {
触摸=事件。触摸[0]；
}否则{
触摸=事件；
}
这个。NX=触摸。clientx-这个。位置。x；
这个。ny=触摸。客户-这个。位置。y；
这个。xpum=这个。dx这个。NX；
这个。ypum=这个。死了吧。ny；
假设客户端宽度=文档。documentelement。客户端宽度；
假设客户高度=文档。documentelement。客户身高；
如果(这个。xpum 0这个。xpum(客户端宽度-this。movebtn。offsetwidth)){
这个。movebtn。风格。左=这个。xpum“px”；
}
如果(这个。ypum 0这个。ypum(客户身高-这个。移动BTN。偏移高度)){
这个。movebtn。风格。top=这个。ypum“px”；
}
//阻止页面的滑动默认事件
文档。addevent侦听器( touch move ，this.handler，{
被动：错误
});
}
},
//鼠标释放时候的函数
btnEnd() {
this.flags=false
文档。addevent侦听器( touch move ，this.handler，{
被动：错误
});
},
处理器(e) {
if(this.flags){
事件。防止默认()；
}否则{
返回真实的
}
}
}
}
/脚本
style lang=stylus 范围。移动按钮{
边界半径：50%;
宽度：50px
高度：50px
位置：固定；
z指数：10;
颜色：# FFF；按钮-维护
位置：相对；
宽度：50px
高度：50px
边界半径：50%;
背景：url(././assets/img/moveButton.png )不重复；
背景-尺寸：50像素50像素
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。