vue3 网站飘窗

<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("") as any

const tipRef = ref()

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

}


.tip {

  width: 300px;

  height: 300px;

  background-color: red;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容