vue2大屏自适应解决方案

1.创建一个组件containerBox

<template>
    <div class="ContainerBox" ref="ContainerBox" :style="{
        width: width + 'px',
        height: height + 'px',
    }">
        <slot></slot>
    </div>
</template>
 
<script>
export default {
    name: "ContainerBox",
    props: {},
    data () {
        return {
            scale: 0,
            width: 1920,  //根据屏幕进行设置
            height: 1080, //根据屏幕进行设置
        };
    },
    mounted () {
        this.setScale();
        window.addEventListener("resize", this.debounce(this.setScale));
    },
    methods: {
        getScale () {
            // 固定好16：9的宽高比，计算出最合适的缩放比
            const { width, height } = this;
            const wh = window.innerHeight / height;
            const ww = window.innerWidth / width;
            console.log(ww < wh ? ww : wh);
            return ww < wh ? ww : wh;
        },
        setScale () {
            // 获取到缩放比例，设置它
            this.scale = this.getScale();
            if (this.$refs.ContainerBox) {
                this.$refs.ContainerBox.style.setProperty("--scale", this.scale);
            }
        },
        debounce (fn, delay) {
            const delays = delay || 500;
            let timer;
            return function () {
                const th = this;
                const args = arguments;
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () {
                    timer = null;
                    fn.apply(th, args);
                }, delays);
            };
        },
    },
};
</script>
 
<style lang="scss" scoped>
#ContainerBox {
    --scale: 1;
}
.ContainerBox {
    position: absolute;
    transform: scale(var(--scale)) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    z-index: 999;
}
</style>

2.引入使用

<template>
    <div>
        <ScaleBox>
            自己的内容
        </ScaleBox>
    </div>
</template>

<script>
import ScaleBox from '@/components/ContainerBox.vue'
export default {
    name: 'Scale',
    components: {
        ScaleBox,
    }
}
</script>