大屏可视化【适配4k】

主要代码：可以将参数注入的参数更改，传入不同宽高比例，自动适应

<template>
    <div class="ScreenAdapter" :style="style">
        <slot />
    </div>
</template>
<script>
export default {
    name: '',
    // 参数注入
    props: {
        width: {
            type: String,
            default: '1920'
        },
        height: {
            type: String,
            default: '1080'
        }
    },
    data () {
        return {
            style: {
                width: this.width + 'px',
                height: this.height + 'px',
                // transform: 'scale(1) translate(-0%, -20%)'
            }
        }
    },
    mounted () {
        this.setScale()
        window.onresize = this.Debounce(this.setScale, 1000)
    },
    methods: {
        Debounce: (fn, t) => {
            const delay = t || 500
            let timer
            return function () {
                const args = arguments
                if (timer) {
                    clearTimeout(timer)
                }
                const context = this
                timer = setTimeout(() => {
                    timer = null
                    fn.apply(context, args)
                }, delay)
            }
        },
        // 获取放大缩小比例
        getScale () {
            let w = 0
            let h = 0
            // 适配4K分辨率
            if (window.innerWidth > 1920) {
                w = window.innerWidth / (this.width * 2)
                h = window.innerHeight / (this.height * 2)
            } else {
                w = window.innerWidth / (this.width)
                h = window.innerHeight / (this.height)
            }

            return [w, h]
        },
        // 设置比例
        setScale () {
            this.style.transform = 'scale(' + this.getScale()[0] + ',' + this.getScale()[1] + ') translate(-50%, -50%)';
        }
    }
};
</script>
<style lang="scss" scoped>
.ScreenAdapter {
    // overflow: hidden;
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    background: white;
}
</style>