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

介绍

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

全屏适配

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

工具

javascript 复制代码
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
    };
}

模板

html 复制代码
  <div class="box" ref="appRef">
    <div class="draw"></div>
    <div class="draw"></div>
    <div class="draw"></div>
  </div>

样式

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

导入

javascript 复制代码
import { useResponsiveScale } from './utils/rsponsiveScale.js';
const { appRef } = useResponsiveScale();
相关推荐
深思慎考2 分钟前
LinuxC++——etcd分布式键值存储系统API(libetcd-cpp-api3)下载与二次封装
linux·c++·etcd
Emrys_5 分钟前
装饰者模式详解与计费功能实现
后端
猎豹奕叔9 分钟前
注解规则编排组件
后端
程序员小假11 分钟前
线程池执行过程中遇到异常该怎么办?
java·后端
karry_k11 分钟前
常用的同步辅助类
后端
稚辉君.MCA_P8_Java15 分钟前
DeepSeek Java 单例模式详解
java·spring boot·微服务·单例模式·kubernetes
千叶寻-20 分钟前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
洛_尘23 分钟前
数据结构--4:栈和队列
java·数据结构·算法
小*-^-*九24 分钟前
Electron vue项目 打包 exe文件2
javascript·vue.js·electron
疯癫的老码农29 分钟前
【小白入门docker】创建Spring Boot Hello World应用制作Docker镜像并运行
java·spring boot·分布式·docker·微服务