手机端添加一个小球vue

<template>
    <transition>
        <div ref="dragIcon"
            class="dragIcon"
            @touchstart.stop="handleTouchStart"
            @touchmove.prevent.stop="handleTouchMove($event)"
            @touchend.stop="handleTouchEnd"
            :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}"
            v-if="isShow">
             <img @click="clickWddImg" class="ball_img" src="@/assets/duban.png" alt="">
             <div class="ball_info" v-show="isShowInfo" :class="{'isLeft': ballPosBorder == 2,'isRight': ballPosBorder == 1}"
             >
             <!-- 拨打电话 -->
                 <div><a class="phone" href="tel:4000063599"><img class="phone_img" src="@/assets/logo.png" alt="">电话沟通</a></div>
                 <!-- <div>微信</div> -->
             </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
       text: {
           type: String,
           default: '球'
       },
       itemWidth: {
           type: Number,
           default: 48
       },
       itemHeight: {
           type: Number,
           default: 48
       }
    },
    data(){
        return{
            left: 0,
            top: 0,
            startToMove: false,
            isShow: true,
            timer: null,
            currentTop: null,
            clientW: document.documentElement.clientWidth,//视口宽
            clientH: document.documentElement.clientHeight,//视口高
            isShowInfo: false,
            disBorder: 20,//贴边的边界值
            ballPosBorder: 1,//1贴右边 2贴左边  3上边  4下边； 
        }
    },
    created () {
       this.left = (this.clientW - this.itemWidth - this.disBorder)
       this.top = (this.clientH/2 - this.itemHeight/2)
    },
    mounted() {
        this.bindScrollEvent()
    },
    beforeDestroy() {
        // 记得销毁一些全局的的事件
        this.removeScrollEvent()
    },
    methods: {
        //点击图像
        clickWddImg(){
          this.isShowInfo = !this.isShowInfo;
        },
        handleTouchStart() {
            this.startToMove = true
            this.$refs.dragIcon.style.transition = "none"
        },
        handleTouchMove(e) {
            const clientX = e.targetTouches[0].clientX;//手指相对视口的x
            const clientY = e.targetTouches[0].clientY;//手指相对视口的y
            const isInScreen = clientX <= this.clientW && clientX >= 0 && clientY <= this.clientH && clientY >=0
            if(this.startToMove && e.targetTouches.length === 1) {
                if(isInScreen) {
                    this.left = clientX - this.itemWidth/2
                    this.top = clientY - this.itemHeight/2
                }
            }
        },
        handleTouchEnd() {
          console.log(this.left,'this.left')
          console.log(this.top,'this.top')
            if(this.left < (this.clientW / 2)) {
                this.left = this.disBorder;//不让贴边 所以设置30没设置0
                this.ballPosBorder = 2;//2贴左边
                this.handleIconY()
            } else {
                this.left = this.clientW - this.itemWidth - this.disBorder;//不让贴边 所以减30
                this.ballPosBorder = 1;//1贴右边
                this.handleIconY()
            }
            this.$refs.dragIcon.style.transition = "all .3s"
        },
        handleIconY() {
            if (this.top < 0) {
                this.top = this.disBorder;//不上帖上边所以设置为30 没设置0
            } else if(this.top + this.itemHeight > this.clientH) {
                this.top = this.clientH - this.itemHeight - this.disBorder;//不让帖下边所以减30
            }
        },
        bindScrollEvent() {
            window.addEventListener('scroll', this.handleScrollStart)
        },
        removeScrollEvent() {
            window.removeEventListener('scroll',this.handleScrollStart)
        },
        handleScrollStart() {
            this.isShow = false
            this.timer && clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.handleScrollEnd()
            },300)
            this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
        },
        handleScrollEnd() {
            this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            // 判断是否停止滚动的条件
            if(this.scrollTop == this.currentTop) {
                this.isShow = true
            }
        }
    },
}
</script>

<style scoped>
.dragIcon {
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3bbdea;
    line-height: 48px;
    text-align: center;
    color: #fff;
    z-index: 99999;
    border: 1px solid #3bbdea;

}
.ball_img{
  width: 100%;
  height: 100%;
  border-radius: 48px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}
.ball_info{
    position: absolute;
    right: 0;
    width: 150px;
    height: 48px;
    background: #3bbdea;
    color: #fff;
    border-radius: 48px;
    display: flex;
    align-items: center;
    font-size: 14px;

}
.phone{
  display: flex;
  align-items: center;
}
.phone_img{
  width: 18px;
  margin: 0 2px;
}
.isLeft{
  left: 0;
  justify-content: flex-end;
  padding-right: 10px;
}
.isRight{
  right: 0; 
  justify-content: flex-start;
  padding-left: 10px;
}
.v-enter {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s;
}
</style>