android-cloud-H5/pages/rtcEngine/components/FloatBtn.vue

<template>
  <div class="float-btn-wrap"
    :style="levitatedSpherePositionData"
    @mousedown.prevent="onSphereDown"
    @mouseup.prevent.stop="onSphereUp"
    @touchmove.prevent="touchmoveLevitatedSphere"
    @mousemove.prevent="touchmoveLevitatedSphere"
    @touchend="touchendLevitatedSphere"
    @mouseup="touchendLevitatedSphere"
    @mouseleave="touchendLevitatedSphere"
    @click.prevent.stop="clickHandler"
    >
    <div class="round-outside">
      <div class="round-small">
        <div class="status"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FloatBtn',
  props: {
    // 窗口尺寸 高
    width: {
      type: Number,
      default: 0
    },
    // 窗口尺寸 宽
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 悬浮球位置
      levitatedSpherePositionData: {},
    }
  },
  mounted() {
    this.initLevitatedSpherePositionData();
  },
  methods: {
    // 悬浮球初始化位置
    initLevitatedSpherePositionData() {
      // 从本地存储中获取悬浮球位置
      let levitatedSpherePositionData = localStorage.getItem('levitatedSpherePositionData');
      // 悬浮球位置
      this.levitatedSpherePositionData = levitatedSpherePositionData ? JSON.parse(levitatedSpherePositionData) : { left: '15px', top: '15px' }
    },
    // 悬浮球按下事件
    onSphereDown(e) {
        // 给元素设置鼠标按下状态
        e.target.isMousedown = true;
        e.preventDefault();
    },
    // 悬浮球抬起事件
    onSphereUp(e) {
        // 给元素设置鼠标按下状态
        e.target.isMousedown = false;
        e.preventDefault();
    },
    // 悬浮球移动
    touchmoveLevitatedSphere(e) {
      // 过滤未按下时的移动事件
      if (e.type === 'mousemove' && !e.target.isMousedown) return

      let pageX, pageY;
      if (e.type === 'mousemove' && e.target.isMousedown) {
          pageX = e.pageX;
          pageY = e.pageY;
      } else if (e.type === 'touchmove') {
          pageX = e.targetTouches[0].pageX;
          pageY = e.targetTouches[0].pageY;
      }

      let min = 20
      let MaxPageX = this.width - 20
      let MaxPageY = this.height - 20
      pageX = pageX <= min ? min : (pageX >= MaxPageX ? MaxPageX : pageX)
      pageY = pageY <= min ? min : (pageY >= MaxPageY ? MaxPageY : pageY)

      this.levitatedSpherePositionData = {
          left: `${pageX}px`,
          top: `${pageY}px`,
          transform: 'translate(-50%, -50%)'
      }
      e.preventDefault();
    },
    touchendLevitatedSphere(e) {
        localStorage.setItem('levitatedSpherePositionData', JSON.stringify(this.levitatedSpherePositionData))
    },
    // 点击悬浮球
    clickHandler(e){
      this.$emit('onClick');
      e.preventDefault();
    },
  }
}
</script>

<style lang="scss" scoped>

.float-btn-wrap{
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 1;

  .round-outside,
  .round-small,
  .status{
    border-radius: 50%;
  }

  .round-outside{
    padding: 4px;
    background-color: #4D4D4D;
    // 设置透明度
    opacity: 0.8;
    .round-small{
      padding: 4px;
      background-color: #A5A5A5;
      opacity: 0.8;
      .status{
        width: 20px;
        height: 20px;
        background-color: #EDEDED;
        opacity: 0.8;
      }
    }
  }
}
</style>