vue浮动按钮-蒲公英云

vue浮动按钮

<template>
  <div class="main-plus" ref="dragBox" @click="goItem" @touchstart="touchstartHandle('dragBox',$event)" @touchmove="touchmoveHandle('dragBox',$event)" @touchend="touchendHandle('dragBox',$event)">
    <van-icon name="wap-home-o" />
  </div>
</template>
<script>
export default {
  data() {
    return {
     coordinate: {
        client: {},
        elePosition: {}
      }
    }
  },
  methods: {
    goItem() {
      this.$emit('goEtone')
    },
    touchstartHandle(refName, e) {
      let element = e.targetTouches[0]
      // 记录点击的坐标
      this.coordinate.client = {
        x: element.clientX,
        y: element.clientY
      }
      // 记录需要移动的元素坐标
      this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
      this.coordinate.elePosition.top = this.$refs[refName].offsetTop
    },
    touchmoveHandle(refName, e) {
      e.returnValue = false;
      let element = e.targetTouches[0]
      // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
      let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
      let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
      // 限制可移动距离，不超出可视区域
      x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
      y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
      // 移动当前元素
      this.$refs[refName].style.left = x + 'px'
      this.$refs[refName].style.top = y + 'px'
      e.returnValue = true;
    },
    touchendHandle(refName, e) {
      let element = e.changedTouches[0]
      let scree = document.body.clientWidth / 2
      let _clientX = element.clientX
      if (_clientX < scree) {
        this.$refs[refName].style.left = 10 + 'px'
      } else {
        this.$refs[refName].style.left = 6.3 + 'rem'
      }
    }
  }
}
</script>
<style  scoped>
.main-plus {
  width: 1rem;
  height: 1rem;
  position: fixed;
  z-index: 10;
  bottom: 5rem;
  right: 0.2rem;
  border-radius: 50%;
  background-color: #5080FF;
  color: #fff;
  line-height: 1rem;
  text-align: center;
  font-size: 0.45rem;
}
</style>