// the find
Alfred-Skyblue/v-scale-screen
Vue large screen adaptive component vue大屏自适应组件
A Vue 3 (and 2.7/2.6) wrapper component that scales a fixed-resolution dashboard to fit any screen using CSS transform: scale. Aimed squarely at the Chinese data-visualization dashboard market — the kind of full-screen ECharts layouts you see on operations center walls. Single-purpose, does exactly one thing.
CSS transform scaling is the right approach for this use case — it keeps the layout engine out of it and preserves pixel-perfect rendering of canvas-based charts. The autoScale {x, y} object option for controlling which axis generates letterbox margins is a thoughtful touch. Vue 2.6 / 2.7 / 3 support from one package without breaking the API is handled cleanly. ResizeObserver with a configurable debounce delay is the correct tool for the resize detection.
The entire package is a single component wrapping a CSS transform — there's not much here that couldn't be copy-pasted in 50 lines, so taking a dependency is arguably overkill. fullScreen mode stretches content and the docs warn against using it, which means that prop probably shouldn't exist at all. No handling for accessibility or text scaling — everything inside the scaled container will ignore the user's font-size preferences and zoom settings. Last push is Nov 2024 and the issue tracker looks quiet; if something breaks with a future Vue release, you're likely patching it yourself.