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;

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容