数据大屏：封装大屏自适应容器组件

在大屏数据可视化项目中，封装大屏自适应容器组件是解决 “1920*1080 设计稿在不同尺寸屏幕上像素级还原、多设备显示一致”的核心方案。我对比了rem、vw/vh、transform: scale()三种适配方案后，最终选择了**transform: scale()等比缩放方案 **—— 因为大屏的核心需求是保持布局和元素比例的绝对统一，rem/vw是按比例缩放元素尺寸，会导致复杂的可视化布局（比如多个图表的位置、间距）变形；而transform: scale()能让整个大屏内容像 “一张图片” 一样等比放大 / 缩小，完美还原设计稿，这是大屏适配的最优解。

第一部分：组件的核心实现步骤（从配置到逻辑，结合代码）

我把组件封装分为基础配置、核心计算、事件监听、插槽设计四个步骤，每个步骤配合代码说明：

1. 步骤 1：定义组件 Props（兼顾通用性和个性化）

组件的 Props 设计遵循 “默认配置 + 个性化扩展” 原则，让组件能适配不同的大屏场景，核心 Props 如下

<script setup lang="ts">
import { defineProps, withDefaults, ref, watch, onMounted, onUnmounted } from 'vue';
import { useDebounceFn } from '@vueuse/core';

// 定义Props类型：覆盖设计稿尺寸、缩放模式、是否全屏等核心配置
interface ScreenAdapterProps {
  // 设计稿基准宽高（默认1920*1080）
  designWidth: number;
  designHeight: number;
  // 缩放模式：'fit'（等比缩放，完整显示）| 'fill'（全屏填充，牺牲比例）
  mode: 'fit' | 'fill';
  // 是否开启自动缩放（监听窗口resize）
  autoScale: boolean;
}

// 设置Props默认值，满足大部分场景的默认需求
const props = withDefaults(defineProps<ScreenAdapterProps>(), {
  designWidth: 1920,
  designHeight: 1080,
  mode: 'fit',
  autoScale: true,
});

// 响应式变量：存储最终的缩放比例和偏移量（用于居中）
const scale = ref(1);
const offsetX = ref(0);
const offsetY = ref(0);
</script>

这些 Props 让组件不仅能适配默认的 1920*1080 设计稿，还能支持自定义尺寸和缩放模式，比如某些特殊大屏需要全屏填充时，只需设置mode="fill"。

步骤 2：核心缩放计算逻辑（实现等比缩放 / 全屏填充）

这是组件的核心，编写计算缩放比例和偏移量的函数，根据mode区分逻辑：

// 计算缩放比例和偏移量的核心函数
const calculateScale = () => {
  // 1. 获取当前窗口的可视区域尺寸（排除滚动条）
  const windowWidth = document.documentElement.clientWidth;
  const windowHeight = document.documentElement.clientHeight;
  // 2. 获取设计稿尺寸
  const { designWidth, designHeight, mode } = props;
  // 3. 计算缩放比例
  let scaleX = windowWidth / designWidth;
  let scaleY = windowHeight / designHeight;

  if (mode === 'fit') {
    // 等比缩放：取宽高比例的最小值，保证内容完整显示
    scale.value = Math.min(scaleX, scaleY);
  } else {
    // 全屏填充：取宽高比例的最大值，铺满整个屏幕
    scale.value = Math.max(scaleX, scaleY);
  }
  // 4. 计算偏移量：让缩放后的内容在窗口中水平+垂直居中
  offsetX.value = (windowWidth - designWidth * scale.value) / 2;
  offsetY.value = (windowHeight - designHeight * scale.value) / 2;
};

关键逻辑：等比缩放时取最小比例保证内容不溢出，全屏填充时取最大比例保证铺满屏幕；偏移量计算是为了让缩放后的内容居中显示，提升视觉效果。

步骤 3：监听窗口 resize 和组件生命周期（实现自动缩放）

配合 VueUse 的useDebounceFn做防抖处理，避免窗口 resize 高频触发计算，同时处理组件的挂载 / 卸载逻辑：

// 用useDebounceFn包装计算函数，防抖延迟500ms（平衡性能和响应性）
const debouncedCalculateScale = useDebounceFn(calculateScale, 500);

// 组件挂载时：执行一次计算，初始化缩放
onMounted(() => {
  calculateScale();
  // 如果开启自动缩放，监听窗口resize事件
  if (props.autoScale) {
    window.addEventListener('resize', debouncedCalculateScale);
  }
});

// 组件卸载时：移除事件监听，避免内存泄漏
onUnmounted(() => {
  if (props.autoScale) {
    window.removeEventListener('resize', debouncedCalculateScale);
  }
});

// 监听Props变化（比如设计稿尺寸修改），重新计算缩放
watch([() => props.designWidth, () => props.designHeight, () => props.mode], calculateScale);