Vue3 数据可视化屏幕大屏适配 页面自适应 响应式 数据大屏 大屏适配

介绍

数据可视化大屏应用时，页面的自适应和响应式设计至关重要。这些技术能够确保应用能够根据不同屏幕尺寸、设备分辨率和窗口变化自动调整布局和显示内容，提升用户体验。

全屏适配
无论大屏还是小屏完美设配

工具

import { onBeforeUnmount, onMounted, ref } from 'vue';/*** useResponsiveScale Hook - 用于实现自适应缩放功能* * @param {number} baseWidth 设计稿的宽度，默认值为 1920* @param {number} baseHeight 设计稿的高度，默认值为 1080* @returns {object} 返回包含 appRef 的对象，appRef 用于绑定需要缩放的元素*/
export function useResponsiveScale(baseWidth = 1920, baseHeight = 1080) {// 定义响应式变量，保存缩放的定时器const drawTiming = ref(null);// 定义响应式变量，保存缩放的宽度和高度const scale = ref({width: '1',height: '1',});// 计算设计稿的宽高比const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));// 用于绑定需要进行缩放的元素的 refconst appRef = ref(null);/*** 计算并应用缩放比例*/const calcRate = () => {if (!appRef.value) return; // 如果 appRef 没有被绑定，直接返回// 计算当前窗口的宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));// 如果当前窗口比设计稿更宽，按宽度缩放if (currentRate > baseProportion) {scale.value.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);scale.value.height = (window.innerHeight / baseHeight).toFixed(5);appRef.value.style.transform = `scale(${scale.value.width}, ${scale.value.height}) translate(-50%, -50%)`;} else {// 如果当前窗口比设计稿更高，按高度缩放scale.value.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5);scale.value.width = (window.innerWidth / baseWidth).toFixed(5);appRef.value.style.transform = `scale(${scale.value.width}, ${scale.value.height}) translate(-50%, -50%)`;}};/*** 处理窗口 resize 事件，防止频繁触发*/const resize = () => {clearTimeout(drawTiming.value); // 清除上一次的定时器drawTiming.value = setTimeout(() => {calcRate(); // 在延迟后计算缩放比例}, 150);};// 在组件挂载时执行计算，并监听窗口的 resize 事件onMounted(() => {calcRate(); // 初始化时计算缩放比例window.addEventListener('resize', resize); // 监听 resize 事件});// 在组件卸载时移除 resize 事件监听器onBeforeUnmount(() => {window.removeEventListener('resize', resize);});// 返回 appRef，以便在组件中绑定需要缩放的元素return {appRef};
}

模板

  <div class="box" ref="appRef"><div class="draw"></div><div class="draw"></div><div class="draw"></div></div>

样式

.box{color: #d3d6dd;width: 1920px;height: 1080px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-origin: left top;overflow: hidden;
}

导入

import { useResponsiveScale } from './utils/rsponsiveScale.js';
const { appRef } = useResponsiveScale();