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"
          :class="{
            success: latency < 51,
            warning: latency > 50 && latency < 201,
            danger: latency > 200
          }"
        >
          <!-- 信号 0-50ms绿色；51-200ms黄色；201-999ms红色；最多显示999ms；变色部分为延迟变色 -->
          <span class="short" />
          <span class="middle" />
          <span class="high" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FloatBtn',
  props: {
    // 窗口尺寸 高
    width: {
      type: Number,
      default: 0
    },
    // 窗口尺寸 宽
    height: {
      type: Number,
      default: 0
    },
    // 网络延迟
    latency: {
      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{
    border-radius: 50%;
  }

  .round-outside{
    padding: 4px;
    background-color: #A5A5A5;
    // 设置透明度
    opacity: 0.8;
    .round-small{
      padding: 4px;
      width: 28px;
      height: 28px;
      background-color: #EDEDED;
      opacity: 0.8;
      
      .status{
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        padding-bottom: 4px;
        .short,
        .middle,
        .high{
          width: 4px;
          background-color: #A5A5A5;
          margin: 0 1px;
        }

      &.success{
        .short,
        .middle,
        .high{
            background-color: #44E2B1;
          }
      }
      &.warning{
        .short,
        .middle,
        .high{
          background-color: #FF9800;
        }
      }
      &.danger{
        .short,
        .middle,
        .high{
          background-color: #FF2627;
        }
      }
      .short{
         height: 40%;
       }
      .middle{
         height: 60%;
       }
      .high{
         height: 80%;
       }
      }
    }
  }
}
</style>