使用vue怎么实现一个可移动的悬浮按钮？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
具体内容如下
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>再data中定义
data() { return { isLoading: false, flags: false, //控制使用 position: { x: 0, y: 0, }, nx: "", ny: "", dx: "", dy: "", xPum: "", yPum: "", }; },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"); }, },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怎么实现一个可移动的悬浮按钮问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
