Vue2移动端实现一个可拖拽悬浮球组件

演示图如下：

---

整体的悬浮球组件代码如下：

---

 用 的话直接引入就行了比如这样：

---

二、

JS 部分：

Vue.component('dragIcon', {
     template: `
       
           

           
       
       `,
     props: {
       text: {
           type: String,
           default: '首页'
       },
       itemWidth: {
           type: Number,
           default: 40
       },
       itemHeight: {
           type: Number,
           default: 40
       }
     },
     data() {
       return {
         left: 0,
         top: 0,
         startToMove: false,
         isShow: true,
         timer: null,
         currentTop: null,
         clientW: document.documentElement.clientWidth,
         clientH: document.documentElement.clientHeight
       }
     },
     created () {
       this.left = (this.clientW - this.itemWidth)
       this.top = (this.clientH/2 - this.itemHeight/2)
     },
     mounted() {
       this.bindScrollEvent()
     },
     beforeDestroy() {
       // 记得销毁一些全局的的事件
       this.removeScrollEvent()
     },
     methods: {
       handleTouchStart() {
         this.startToMove = true
         this.$refs.dragIcon.style.transition = "none"
       },
       handleTouchMove(e) {
         const clientX = e.targetTouches[0].clientX
         const clientY = e.targetTouches[0].clientY
         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() {
         if(this.left < (this.clientW / 2)) {
             this.left = 0
             this.handleIconY()
         } else {
             this.left = this.clientW - this.itemWidth
             this.handleIconY()
         }
         this.$refs.dragIcon.style.transition = "all .3s"
       },
       handleIconY() {
         if (this.top < 0) {
             this.top = 0
         } else if(this.top + this.itemHeight > this.clientH) {
             this.top = this.clientH - this.itemHeight
         }
       },
       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
         }
       }
     }
   })

---

HTML 部分：

   
1111
   
2222
   
 

---

CSS 部分：

.dragIcon {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: gray;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.content1 {
  height: 400px;
  background-color: rgb(230,180,80);
}
.content2 {
  height: 500px;
  background-color: rgb(227,230,195);
}
.v-enter {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s;
}

---

功能升华 ：

Vue2 中实现一个悬浮球点击可以展开/收取，可拖拽到页面的任何位置