huangguo_dhz/src/components/FloatingBlock/index.vue

<template>
  <!-- 浮窗 -->
  <div
    class="square"
    id="moveDiv"
    :class="{ closeSquare: isClose }"
    @mousedown="down()"
    @touchstart="down()"
    @mousemove.prevent.stop="move()"
    @touchmove.prevent.stop="move()"
    @mouseup="end()"
    @touchend="end()"
    @click="jumpUrl()"
    v-if="advObj"
  >
    <LazyImg class="squareImg" :src="advObj?.cover" />
    <div class="close" @click.stop="close" v-if="!isClose"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
// import { AdType, getAdItem } from '@/utils/getConfig';
import { AdType } from '@/enums/app';
import { getAdItem } from '@/utils/getConfig';
import { jumpAdv } from '@/utils/index';
// 悬浮
let flags = ref(false);
let position = reactive({
  x: 0,
  y: 0,
});
let nx = ref();
let ny = ref();
let dx = ref();
let dy = ref();
let xPum = ref();
let yPum = ref();
let advObj = ref(); // 广告
let isClose = ref(false);
// 初始化广告
init();
function init() {
  advObj.value = getAdItem(AdType.SHORTVIDEOADV)[0];
  // console.log(getAdItem(AdType.SHORTVIDEOADV)[0].cover, '-------------');
  // console.log(advObj.value);
}
// 实现移动端拖拽
function down() {
  flags.value = true;
  let touch;
  if ((event as any).touches) {
    touch = (event as any).touches[0];
  } else {
    touch = event;
  }
  position.x = touch.clientX;
  position.y = touch.clientY;
  dx.value = (document.getElementById('moveDiv') as HTMLElement).offsetLeft;
  dy.value = (document.getElementById('moveDiv') as HTMLElement).offsetTop;
}
function move() {
  if (flags.value) {
    let touch;
    if ((event as any).touches) {
      touch = (event as any).touches[0];
    } else {
      touch = event;
    }
    nx.value = touch.clientX - position.x;
    ny.value = touch.clientY - position.y;
    xPum.value = dx.value + nx.value;
    yPum.value = dy.value + ny.value;
    //添加限制：只允许在屏幕内拖动
    const maxWidth = document.body.clientWidth - 90; //屏幕宽度减去悬浮框宽高
    const maxHeight = document.body.clientHeight - 90;
    if (xPum.value < 0) {
      //屏幕x限制
      xPum.value = 0;
    } else if (xPum.value > maxWidth) {
      xPum.value = maxWidth;
    }
    if (yPum.value < 65) {
      //屏幕y限制
      yPum.value = 65;
    } else if (yPum.value > maxHeight) {
      yPum.value = maxHeight;
    }
    (document.getElementById('moveDiv') as HTMLElement).style.left = xPum.value + 'px';
    (document.getElementById('moveDiv') as HTMLElement).style.top = yPum.value + 'px';
    //阻止页面的滑动默认事件
    // document.addEventListener(
    //   "touchmove",
    //   function () {
    //     // 1.2 如果碰到滑动问题，请注意是否获取到 touchmove
    //     (event as any).preventDefault(); //jq 阻止冒泡事件
    //     // event.stopPropagation(); // 如果没有引入jq 就用 stopPropagation()
    //   },
    //   { passive: true }
    // );
  }
}
//鼠标释放时候的函数
function end() {
  flags.value = false;
}
function close() {
  isClose.value = true;
}
function jumpUrl() {
  if (isClose.value) return (isClose.value = false);
  jumpAdv(advObj.value);
}
</script>
<style lang="scss" scoped>
.square {
  height: 80px;
  width: 80px;
  z-index: 1000;
  position: fixed;
  top: 60px;
  left: 5px;
  border-radius: 10px;
  // overflow: hidden;
  :deep(img) {
    border-radius: 10px;
  }
  .squareImg {
    height: 80px;
    width: 80px;
  }
  .close {
    position: absolute;
    right: -10px;
    top: -10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: url('../../assets/images/png/appsClose.png') no-repeat;
    background-size: 100% 100%;
  }
}
.closeSquare {
  width: 20px;
  border-radius: 20px;
  .squareImg {
    width: 20px;
  }
}
</style>