vue项目实现按钮可随意移动

Pascall ·

更新时间:2024-09-20

· 1934 次阅读

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>