微客导航 » 文章资讯 » vue实现可移动的悬浮按钮

vue实现可移动的悬浮按钮

2023-07-04 19:23:03 332

本文实例为大家分享了vue实现可随处移动悬浮按钮的具体代码，供大家参考，具体内容如下

1.html代码

2.再data中定义

data(){
return{
isLoading:false,
flags:false,//控制使用
position:{
x:0,
y:0,
},
nx:"",
ny:"",
dx:"",
dy:"",
xPum:"",
yPum:"",
};
},

3.js代码

methods:{
callback(){
this.$router.go(-1);
},
onRefresh(){
//window.location.reload();
setTimeout((res)=>{
console.log(res);
this.isLoading=false;
},1000);
},
down(){
this.flags=true;
vartouch;
if(event.touches){
touch=event.touches[0];
}else{
touch=event;
}
this.position.x=touch.clientX;
this.position.y=touch.clientY;
this.dx=this.$refs.fu.offsetLeft;
this.dy=this.$refs.fu.offsetTop;
},
move(){
if(this.flags){
vartouch;
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;
letwidth=window.innerWidth-this.$refs.fu.offsetWidth;//屏幕宽度减去自身控件宽度
letheight=window.innerHeight-this.$refs.fu.offsetHeight;//屏幕高度减去自身控件高度
this.xPum<0&&(this.xPum=0);
this.yPum<0&&(this.yPum=0);
this.xPum>width&&(this.xPum=width);
this.yPum>height&&(this.yPum=height);
//if(this.xPum>=0&&this.yPum>=0&&this.xPum<=width&&this.yPum<=height){
this.$refs.fu.style.left=this.xPum+"px";
this.$refs.fu.style.top=this.yPum+"px";
//}
//阻止页面的滑动默认事件
document.addEventListener(
"touchmove",
function(){
event.preventDefault();
},
false
);
}
},
//鼠标释放时候的函数
end(){
this.flags=false;
},
onClick(){
//在这里我是作为子组件来使用的
this.$emit("click");
},
},

4.style样式


.callbackp{
font-size:16px;
color:#fff;
background:rgba(56,57,58,0.5);
border-radius:50%;
text-align:center;
width:50px;
height:50px;
line-height:50px;
font-family:PingFangSC;
font-weight:600;
box-shadow:0010px#fff;
}
.callbackimg{
display:block;
width:50px;
height:50px;
box-shadow:0010pxrgb(133,129,129);
border-radius:50%;
background:#fff;
}
.callback{
position:fixed;
top:40px;
left:20px;
z-index:99999;
}
.float{
position:fixed;
right:20px;
top:60%;
touch-action:none;
text-align:center;
width:50px;
height:50px;
border-radius:24px;
line-height:48px;
color:white;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue实现可移动的悬浮按钮

热门推荐

随机推荐