vue项目实现按钮可随意移动
作者：帅_帅
这篇文章主要为大家详细介绍了vue项目实现按钮可随意移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue项目中实现按钮可随意移动，供大家参考，具体内容如下
组件代码如下：
在项目中引入该组件即可
<template>
<div v-show="hide" class="move-button" ref="moveBtn"
@mousedown="btnDown"
@touchstart="btnDown"
@mousemove="btnMove"
@touchmove="btnMove"
@mouseup="btnEnd"
@touchend="btnEnd"
@touchcancel="btnEnd">
<div class="button-mainbg">
</div>
</div>
</template>
<script>
export default {
name: 'MoveButton',
data() {
return {
hide: true,
img: require('@/assets/img/moveButton.png'),
flags: false,
position: {
x: 0,
y: 0
},
nx: '',
ny: '',
dx: '',
dy: '',
xPum: '',
yPum: '',
isShow: false,
moveBtn: {},
timer: null,
currentTop:0
}
},
mounted() {
this.moveBtn = this.$refs.moveBtn;
window.addEventListener('scroll', this.hideButton);
},
beforeDestroy() {
window.addEventListener('scroll', this.hideButton);
},
methods: {
hideButton() {
this.timer&&clearTimeout(this.timer);
this.timer = setTimeout(()=>{
this.handleScrollEnd();
},300);
this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
this.hide = false;
},
handleScrollEnd(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop === this.currentTop){
this.hide = true;
clearTimeout(this.timer);
}
},
// 实现移动端拖拽
btnDown() {
this.flags = true;
let touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = this.moveBtn.offsetLeft;
this.dy = this.moveBtn.offsetTop;
},
btnMove() {
if (this.flags) {
let touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
this.nx = touch.clientX - this.position.x;
this.ny = touch.clientY - this.position.y;
this.xPum = this.dx + this.nx;
this.yPum = this.dy + this.ny;
let clientWidth = document.documentElement.clientWidth;
let clientHeight = document.documentElement.clientHeight;
if (this.xPum > 0 && this.xPum < (clientWidth - this.moveBtn.offsetWidth)) {
this.moveBtn.style.left = this.xPum + "px";
}
if (this.yPum > 0 && this.yPum < (clientHeight - this.moveBtn.offsetHeight)) {
this.moveBtn.style.top = this.yPum + "px";
}
//阻止页面的滑动默认事件
document.addEventListener("touchmove", this.handler, {
passive: false
});
}
},
//鼠标释放时候的函数
btnEnd() {
this.flags = false;
document.addEventListener('touchmove', this.handler, {
passive: false
});
},
handler(e) {
if(this.flags){
event.preventDefault();
}else{
return true
}
}
}
}
</script>
<style lang="stylus" scoped>
.move-button {
border-radius:50%;
width: 50px;
height: 50px;
position: fixed;
z-index: 10;
color: #FFF;
.button-mainbg{
position: relative;
width:50px;
height:50px;
border-radius:50%;
background: url("../../assets/img/moveButton.png") no-repeat;
background-size: 50px 50px;
}
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。