使用vue怎么实现一个可移动的悬浮按钮？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
具体内容如下
1.html代码
计算
安全
数据库
网络和加速
企业服务
<div
class="callback float"
@click="onClick"
@mousedown="down"
@touchstart="down"
@mousemove="move"
@touchmove="move"
@mouseup="end"
@touchend="end"
ref="fu"
>
<!-- <p @click="callback">返回</p> -->
<img @click="callback" src="@/assets/images/callbs.jpg" alt />
</div>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样式
<style scoped>
.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;
}
</style>关于使用vue怎么实现一个可移动的悬浮按钮问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
