vue 随机飘窗（一个或多个）

1.页面引用

<template>
    <div class="index">
        <bayWindow v-for="item in window" :info="item" random></bayWindow>
    </div>
</template>

2.注册

<script>
import bayWindow from '../components/index/bayWindow.vue'

 components: {
       bayWindow
    },
</script>

3.定义或者获取接口数据

4.封装组件  bayWindow

bayWindow.vue

<script>
import { getClientSize, getScrollBarWidth } from '@/assets/js/tools'


export default {
    name: 'bayWindow',
    props: {
        random: {
            type: Boolean,
            default: false
        },
        info:{
            type:Object
        }
    },
    data() {
        return {
            innerWidth: 0,
            innerHeight: 0,
            rectangle: [200, 100],
            clineX: 0,
            clineY: 0,
            removeAnimation :true,
            posX: 1,
            posY: 1,
            enableAnimation: true
        }
    },
    watch: {},
    computed: {
        rectangleStyle() {
            return {
                width: `${this.rectangle[0]}px`,
                height: `${this.rectangle[1]}px`,
                top: `${this.clineY}px`,
                left: `${this.clineX}px`,
            }
        },
    },
    mounted() {
        this.getClientSize()
        this.rectangleAnimation()
        if (this.random) {
            this.setRandom();
        }
        window.addEventListener('resize', () => {
            this.getClientSize()
        })
    },
    beforeDestroy() {
    },
    methods: {
        getClientSize() {
            const bw = getScrollBarWidth();
            const { width, height } = getClientSize()
            this.innerWidth = width - this.rectangle[0] - bw;
            this.innerHeight = height - this.rectangle[1]
        },
        rectangleAnimation() {
            if (this.enableAnimation) {
                this.setRectanglePosition()
            }
            if(this.removeAnimation){
                requestAnimationFrame(this.rectangleAnimation)
            }
        },
        setRectanglePosition() {
            if (this.clineY >= this.innerHeight) {
                this.posY = -1;
            }
            if (this.clineY <= 0){
                this.posY = 1;
            }
            if (this.clineX >= this.innerWidth) {
                this.posX = -1;
            }
            if (this.clineX <= 0){
                this.posX = 1;
            }
            this.clineY += this.posY;
            this.clineX += this.posX;
        },
        eventAnimateStart() {
            this.enableAnimation = true;
        },
        eventAnimateStop() {
            this.enableAnimation = false;
        },
        removeStop(id){
            if(id === this.info.id){
                this.removeAnimation = false
            }

        },
        setRandom() {
            this.clineX = Math.random() * this.innerWidth;
            this.clineY = Math.random() * this.innerHeight;
        }
    }
}
</script>

<template>
<div class="bay"  v-show="removeAnimation" :style="rectangleStyle" @mouseenter="eventAnimateStop" @mouseout="eventAnimateStart">
    <img :src="info.img" alt="">
    <p>{{info.title}}</p>
    <i class="iconfont icon-guanbi" style="color: #d81e06;" @mouseenter="eventAnimateStop" @mouseout="eventAnimateStart" @click="removeStop(info.id)"/>
</div>
</template>

<style scoped lang="scss">
.bay{
    position: fixed;
    z-index: 99999;
    background: #ffffff;
    border: 1px solid #ccc;

    img{
        width: 200px;
        height: 100px;
    }
    p{
        position: absolute;
        bottom: 0;
        left:0;
        height: 30px;
        line-height: 30px;
        background: #000;
        width: 100%;
        opacity: 0.5;
        box-sizing: border-box;
        color: #ffffff;
        padding:0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    i{
        position: absolute;
        top: 4px;
        right:4px
    }

}
</style>

5.tools.js里的 getClientSize, getScrollBarWidth方法

export var getClientSize = function () {
    var width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
    var height = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
    return { width: width, height: height };
};

let scrollBarWidth;
export var getScrollBarWidth = function () {
    if (scrollBarWidth !== undefined)
        return scrollBarWidth;
    var outer = document.createElement('div');
    outer.className = 'el-scrollbar__wrap';
    outer.style.visibility = 'hidden';
    outer.style.width = '100px';
    outer.style.position = 'absolute';
    outer.style.top = '-9999px';
    document.body.appendChild(outer);
    var widthNoScroll = outer.offsetWidth;
    outer.style.overflow = 'scroll';
    var inner = document.createElement('div');
    inner.style.width = '100%';
    outer.appendChild(inner);
    var widthWithScroll = inner.offsetWidth;
    outer.parentNode.removeChild(outer);
    scrollBarWidth = widthNoScroll - widthWithScroll;
    return scrollBarWidth;
};