vue前端可视化大屏页面适配方案

参考了其他博主的代码，但发现会有滚动条，并且居中的位置不太对，所以改了一下css，修复了这些问题，直接上代码

<template>
<div class="ScaleBoxA"><divclass="ScaleBox"ref="ScaleBox":style="{width: width + 'px',height: height + 'px',}"><!--  内容  --></div>
</div>
</template>
<script>
export default {name: 'index',data() {return {scale: 0,width: 1920,height: 1080,}}, methods: {getScale() {const { width, height } = thisconst wh = window.innerHeight / heightconst ww = window.innerWidth / widthreturn 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 || 500let timerreturn function () {const th = thisconst args = argumentsif (timer) {clearTimeout(timer)}timer = setTimeout(function () {timer = nullfn.apply(th, args)}, delays)}},},mounted() {this.setScale()window.addEventListener('resize', this.debounce(this.setScale))},
}
<style lang="scss" scoped>
#ScaleBox {--scale: 1;
}
.ScaleBoxA {top: 0;width: 100vw;height: 100vh;position: fixed;display: flex;align-items: center;justify-content: center;
}
.ScaleBox {transform: scale(var(--scale));display: flex;flex-direction: column;transform-origin: 960px 540px;transition: 0.3s;z-index: 999;
}
</style>