大屏布局

一、宽高保持 16:9，面板居中显示

<div ref="commonPageRef" style="height:100%;margin:0 auto" :style="[{'width': pageWidth + 'px'}]">
内容
</div>

this.pageSizeFn()
window.addEventListener('resize', () => {
    this.pageSizeFn()
})

pageSizeFn() {
    if (this.$refs.commonPageRef) {
        this.pageWidth = this.$refs.commonPageRef.offsetHeight * 16 / 9
    } else {
        let heightVal = document.documentElement.clientHeight || window.innerHeight
        this.pageWidth = heightVal * 16 / 9
    }
}

二、使用缩放 scale

<div v-bind:style="styleObject" class="scale-ele">
    内容
</div>
 
import debounce from "lodash/debounce"
import { computed, reactive } from "vue"
let sizeObj = reactive({
    width: 1920,
    height: 1080,
    scaleX: null,
    scaleY: null,
})
onMounted(() => {
    getScale()
    window.addEventListener("resize", setScale)
})
const getScale = () => {
    // 分别计算X轴和Y轴的缩放比例，撑满屏幕
    sizeObj.scaleX = window.innerWidth / sizeObj.width // 可以多加逻辑判断是否需要保持16:9
    sizeObj.scaleY = window.innerHeight / sizeObj.height
}
const setScale = debounce(() => {
    getScale()
}, 500)
let styleObject = computed(() => {
    let obj = {
        transform: `scale(${sizeObj.scaleX},${sizeObj.scaleY})`,
        WebkitTransform: `scale(${sizeObj.scaleX},${sizeObj.scaleY})`,
        width: sizeObj.width + "px",
        height: sizeObj.height + "px",
    };
    return obj
})
onUnmounted(() => {
    window.removeEventListener("resize", setScale)
});
 
.scale-ele {
    transform-origin: 0 0;
    transition: 0.3s;
}