vue浮动按钮

比眉伴天荒 2021-07-26 15:56 605阅读 0赞

<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>