【组件】悬浮框

<template>
	<div class="floating-panel" ref="floatAD" @mouseover="clearFdAd" @mouseout="startFdAd" style="position: absolute; z-index: 111; left: 0; top: 0" v-show="application.showFloat" >
        <el-icon @click="closeFloat" style="font-size:'14px';color:#fff;position:absolute;right:5px;top:5px;z-index: 120;"><Close /></el-icon>  
        <div style="width:100%;height:100%;position:relative;cursor:pointer"> 
            <slot></slot>
        </div>
	</div>
</template>

<script setup>
import { onMounted, ref,  h ,computed, inject, reactive, watch ,nextTick,provide} from 'vue' ;
import dayjs from "dayjs";
const props = defineProps({
  ftime: { type: Number,default:0 }, //毫秒级
}); 
watch(
	() => props.ftime,
	val => {
		ftime.value = val
	}
)
const startTime =dayjs().valueOf(); 
watch(
	() => startTime,
	val => {
		startTime.value = val
	}
)
// 悬浮窗
const { application, clearFdAd, startFdAd, changePos, floatAD, closeFloat} = initFloat()
function initFloat(){ 
	const application = reactive({
		showFloat: true,
		modal:{
			visible:false,
			title:'系统使用情况统计',
			src:''
		}
	})
	let xPos=0
    let yPos=0
    let step= 1
    let delay= 18
    let Hoffset= 0
    let Woffset= 0
    let yon= 0
    let xon= 0
	const timer = ref(null);
	const floatAD = ref(null)
  	const changePos =() => { 
        if(props.ftime && startTime+props.ftime <= dayjs().valueOf()){
            closeFloat();
            return;
        };
        
        console.log(timer.value);
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;
		// let width = 1920
		// let height = 1080
        Hoffset = floatAD.value && floatAD.value.offsetHeight || 0; //获取元素高度
        Woffset = floatAD.value && floatAD.value.offsetWidth || 0;
        // 滚动部分跟随屏幕滚动
        // this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
        // this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";
 
        // 滚动部分不随屏幕滚动
		if(floatAD.value){
        	floatAD.value.style.left = xPos + document.body.scrollLeft + "px";
        	floatAD.value.style.top = yPos + document.body.scrollTop + "px";
		}
 
        if (yon) {
            yPos = yPos + step;
        } else {
            yPos = yPos - step;
        }
        if (yPos < 0) {
            yon = 1;
            yPos = 0;
        }
        if (yPos >= height - Hoffset) {
            yon = 0;
            yPos = height - Hoffset;
        }
 
        if (xon) {
            xPos = xPos + step;
        } else {
            xPos = xPos - step;
        }
        if (xPos < 0) {
            xon = 1;
            xPos = 0;
        }
        if (xPos >= width - Woffset) {
            xon = 0;
            xPos = width - Woffset;
        }
	}
        
    const clearFdAd =() => {
        clearInterval(timer.value);
    }
    const startFdAd =() => {
        timer.value = setInterval(changePos, delay);
    }
	const closeFloat =() => {
		application.showFloat = false
		clearFdAd()
	} 
	onMounted(() => {
		nextTick(() => {
			setTimeout(() => {
				timer.value = setInterval(changePos, delay);
               
			},500)
		})
	})
	return { application, clearFdAd, startFdAd, changePos,floatAD , closeFloat }
}


</script>

<style lang="scss" scoped>
@import 'styles/var.scss';
 .floating-panel{ 
    background-color:rgba(black, 0.5);
    padding:vm(8) vm(8) 0 vm(8)
 } 
</style>