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();
相关推荐
小汉堡编程41 分钟前
数据结构——vector数组c++(超详细)
数据结构·c++
程序员张32 小时前
Maven编译和打包插件
java·spring boot·maven
ybq195133454313 小时前
Redis-主从复制-分布式系统
java·数据库·redis
weixin_472339463 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
小毛驴8504 小时前
Linux 后台启动java jar 程序 nohup java -jar
java·linux·jar
DKPT4 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
好奇的菜鸟6 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
tan180°6 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
DuelCode7 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
优创学社27 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端