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

傷城~ 2023-03-13 13:21 18阅读 0赞

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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230312/41a9db94447d4b9cae14da54cd4ef68f.png