vue项目中实现按钮可随意移动,供大家参考,具体内容如下
组件代码如下:
在项目中引入该组件即可
<template> <div v-show="hide" class="move-button" ref="moveBtn" @mousedown="btnDown" @touchstart="btnDown" @mousemove="btnMove" @touchmove="btnMove" @mouseup="btnEnd" @touchend="btnEnd" @touchcancel="btnEnd"> <div class="button-mainbg"> </div> </div> </template> <script> export default { name: 'MoveButton', data() { return { hide: true, img: require('@/assets/img/moveButton.png'), flags: false, position: { x: 0, y: 0 }, nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '', isShow: false, moveBtn: {}, timer: null, currentTop:0 } }, mounted() { this.moveBtn = this.$refs.moveBtn; window.addEventListener('scroll', this.hideButton); }, beforeDestroy() { window.addEventListener('scroll', this.hideButton); }, methods: { hideButton() { this.timer&&clearTimeout(this.timer); this.timer = setTimeout(()=>{ this.handleScrollEnd(); },300); this.currentTop = document.documentElement.scrollTop || document.body.scrollTop; this.hide = false; }, handleScrollEnd(){ let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop === this.currentTop){ this.hide = true; clearTimeout(this.timer); } }, // 实现移动端拖拽 btnDown() { this.flags = true; let touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } this.position.x = touch.clientX; this.position.y = touch.clientY; this.dx = this.moveBtn.offsetLeft; this.dy = this.moveBtn.offsetTop; }, btnMove() { if (this.flags) { let 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 clientWidth = document.documentElement.clientWidth; let clientHeight = document.documentElement.clientHeight; if (this.xPum > 0 && this.xPum < (clientWidth - this.moveBtn.offsetWidth)) { this.moveBtn.style.left = this.xPum + "px"; } if (this.yPum > 0 && this.yPum < (clientHeight - this.moveBtn.offsetHeight)) { this.moveBtn.style.top = this.yPum + "px"; } //阻止页面的滑动默认事件 document.addEventListener("touchmove", this.handler, { passive: false }); } }, //鼠标释放时候的函数 btnEnd() { this.flags = false; document.addEventListener('touchmove', this.handler, { passive: false }); }, handler(e) { if(this.flags){ event.preventDefault(); }else{ return true } } } } </script> <style lang="stylus" scoped> .move-button { border-radius:50%; width: 50px; height: 50px; position: fixed; z-index: 10; color: #FFF; .button-mainbg{ position: relative; width:50px; height:50px; border-radius:50%; background: url("../../assets/img/moveButton.png") no-repeat; background-size: 50px 50px; } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。