Vue 数据可视化大屏适配

最近手里有个需求，需要做大屏适配，原本在本地展示正常的页面，放在大屏上展示就无法满屏了，在网上搜集了一点资料最终自己总结了下
首先在mounted生命周期中，监听window的变化

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

然后在methods中增加resize方法

resize() {
	// 记录开发时候的尺寸
    const width = 1550 ,height = 680
    let w = window.innerWidth / width
    let h = window.innerHeight / height
    let scale = w < h ? w : h
    let body = document.body
    // 通过transform 去对body进行等比缩小
    body.style.transform = 'scale(' + scale + ')'
    body.style.transformOrigin = '0 0'
}

然后正常情况下等比的大屏就可以适配了