vue大屏可视化自适应完美方案

背景

在做大屏可视化项目的时候，一般设计稿会设计成1920*1080，但是页面写死1920*1080在2k、4k等分辨率的屏幕下是不适配的。如果页面能够根据屏幕比例进行等比缩放那就好了。

比例

什么？不知道屏幕比例？其实我们常见的1920*1080（1080P）、2k、4k...都是16：9的比例，在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示，确定了实际屏幕比例，按照实际屏幕比例选择一个设计稿尺寸进行设计，设计稿出来后前端严格按照设计稿px进行开发页面即可（前提是按照下列适应方案进行开发）下列适应方案能够适应同比例下的所有分辨率屏幕。

方案

提到等比缩放，第一反应就是css3的缩放属性；其实“阿里DataV”与“腾讯云图”两个大厂的数据可视化项目对大屏数据可视化的适应方案均采用css3的transform：scale进行等比缩放实现的，这种方案目前也被很多人在使用，个人在实际项目中也采用的这种方案。

实际应用

使用 scale-box 组件，vue2与vue3都支持，使用非常简单，引入之后组件内所有内容都会按照设置的宽高比例进行缩放，还有屏幕缩放防抖优化

vue2版本（npm官网）：https://www.npmjs.com/package/vue2-scale-box

vue3版本（npm官网）：https://www.npmjs.com/package/vue3-scale-box

也适用于项目开发完成后发现需要做适配，引入组件包裹项目根节点即可。

属性：

• width 宽度 默认 1920
• height 高度 默认 1080
• bgc 背景颜色 默认 "transparent"
• delay自适应缩放防抖延迟时间（ms） 默认 100
• @scaleChange 缩放值发生改变的方法 可动态获取 scale 改变后的值