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));

    // 用于绑定需要进行缩放的元素的 ref
    const 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();