使用vue怎么实现一个可移动的悬浮按钮？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目
做网站、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元柞水做网站,已为上家服务,为柞水各地企业和个人服务,联系电话:028-86922220
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
具体内容如下
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;
var touch;
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) {
var 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 width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度
let height = 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样式
.callback p {
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: PingFang SC;
font-weight: 600;
box-shadow: 0 0 10px #fff;
}
.callback img {
display: block;
width: 50px;
height: 50px;
box-shadow: 0 0 10px rgb(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;
}
关于使用vue怎么实现一个可移动的悬浮按钮问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
标题名称：使用vue怎么实现一个可移动的悬浮按钮-创新互联
网页地址：
http://bjjierui.cn/article/hcosc.html
