vue3 做网站飘窗

小妤妤

于 2024-01-25 19:07:45 发布

阅读量249

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43195831/article/details/135851819

版权

话不多数，直接上代码吧

    <div class="tip" ref="tipRef" :style="{'top':top + 'px','left':left + 'px'}"></div>

const top = ref(0);
  const left = ref(0);
  const maxTop = ref(0);
  const maxLeft = ref(0);
  const stepX = ref(1);
  const stepY = ref(1);
  const timer = ref('')
  const tipRef = ref()

  function dasdasd() {
    maxTop.value = document.documentElement.clientHeight - 290
    maxLeft.value = document.documentElement.clientWidth - 190
    timer.value = setInterval(() => {
      if (top.value >= maxTop.value || top.value < 0) {
        stepY.value = -stepY.value
      }
      if (left.value >= maxLeft.value || left.value < 0) {
        stepX.value = -stepX.value
      }
      top.value += stepY.value
      left.value += stepX.value
    }, 10)
  }

  dasdasd()

  .tip {
      width: 300px;
      height: 300px;
      background: red;
      position: fixed;
      top: 0;
      left: 0px;
      right: 0;
      bottom: 0;
      z-index: 999;
    }