vue实现可移动的悬浮按钮

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

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实现可移动的悬浮按钮

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

登录后才能评论