使用vue怎么实现一个可移动的悬浮按钮

使用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怎么实现一个可移动的悬浮按钮问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网精选频道了解更多相关知识。