vue 页面等比例缩放-组件

<template>
    <div
        ref="ScaleBox"
        class="ScaleBox"
        :style="{
            width: width + 'px',
            height: height + 'px'
        }"
    >
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'ScaleBox',
    props: {},
    data() {
        return {
            scale: 0,
            width: 7680,
            height: 2160
        };
    },
    mounted() {
        this.setScale();
        window.addEventListener('resize', this.debounce(this.setScale));
    },
    methods: {
        getScale() {
            const { width, height } = this;
            const wh = window.innerHeight / height;
            const ww = window.innerWidth / width;
            return ww < wh ? ww : wh;
        },
        setScale() {
            this.scale = this.getScale();
            if (this.$refs.ScaleBox) {
                this.$refs.ScaleBox.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>
#ScaleBox {
    --scale: 1;
}
.ScaleBox {
    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;
    background: url('../../images/inspectionBigScreen/bg.png') no-repeat;
    background-size: 100% 100%;
}
</style>