ScaleBox 大屏自适应容器

c-scale-box 是一个大屏自适应容器组件。核心原理是对内部区域进行 CSS transform: scale 缩放，让基于固定设计尺寸（如 1920×1080）开发的页面，在不同分辨率的屏幕下等比缩放铺满父容器。

支持四种缩放模式：

• 宽高等比自适应（默认）：保持宽高比，取较小缩放比，居中留白，不变形。
• 宽度自适应：按父容器宽度铺满，高度可能溢出。
• 高度自适应：按父容器高度铺满，宽度可能溢出。
• 全屏拉伸自适应：x、y 轴独立缩放铺满父容器，会存在拉伸变形，非必要不建议开启。

组件以父容器的 clientWidth / clientHeight 为基准计算缩放，请确保父容器有明确的尺寸（如全屏时为 width:100vw; height:100vh）。

bodyOverflowHidden 默认为 true，挂载时会把 document.body 设为 overflow: hidden。这适用于占满整屏的大屏场景；若把组件嵌入需要正常滚动的普通页面（例如本文档），请设置 :bodyOverflowHidden="false"，否则整页将无法滚动。

基础用法

默认 1920×1080 设计尺寸，宽高等比自适应并居中。

缩放模式

通过 autoScale 与 fullScreen 组合表达四种模式：

目标效果	配置
宽高等比（居中留白）	:autoScale="true"（默认）
宽度自适应	:autoScale="{ x: false, y: true }"
高度自适应	:autoScale="{ x: true, y: false }"
全屏拉伸	:fullScreen="true"
关闭自适应	:autoScale="false"

autoScale 对象中，某个轴为 true 表示该轴产生边距（即由另一个轴决定铺满方向）。启用 fullScreen 时 autoScale 失效。

<!-- 宽度自适应：始终铺满宽度 -->
<c-scale-box :width="1920" :height="1080" :autoScale="{ x: false, y: true }" />

<!-- 高度自适应：始终铺满高度 -->
<c-scale-box :width="1920" :height="1080" :autoScale="{ x: true, y: false }" />

<!-- 全屏拉伸：铺满父容器（会变形） -->
<c-scale-box :width="1920" :height="1080" :fullScreen="true" />

自定义样式

boxStyle 修改外层容器样式（如居中留白时的侧边背景色），wrapperStyle 修改缩放区域样式。

<c-scale-box
  :width="1920"
  :height="1080"
  :boxStyle="{ background: '#02050c' }"
  :wrapperStyle="{ boxShadow: '0 0 40px rgba(14,165,233,.4)' }"
/>

防抖

窗口变化时缩放重算默认带 500ms 防抖，可通过 delay 调整。

<c-scale-box :delay="300" />

API

Props

属性	说明	类型	默认值
width	大屏设计宽度	Number | String	1920
height	大屏设计高度	Number | String	1080
autoScale	自适应配置。为 boolean 时启用/关闭自适应；为对象 {x,y} 时，x 为 true 则 x 轴产生边距，y 为 true 则 y 轴产生边距；启用 fullScreen 时此配置失效	Boolean | { x: boolean; y: boolean }	true
delay	窗口变化防抖延迟时间（毫秒）	Number	500
fullScreen	全屏自适应，启用此配置时会存在拉伸效果，同时 autoScale 失效，非必要情况下不建议开启	Boolean	false
boxStyle	修改容器样式，如居中展示时侧边背景色，符合 Vue 双向绑定 style 标准格式	Object	null
wrapperStyle	修改自适应区域样式，符合 Vue 双向绑定 style 标准格式	Object	null
bodyOverflowHidden	启用后 body 的样式会自动设置为 overflow: hidden	Boolean	true

Events

事件名	说明	回调参数
scaleChange	缩放比例变化时触发	(scale: { width: number; height: number })

Expose

方法名	说明	类型
resize	手动触发一次重新计算缩放	() => void

Slots

插槽名	说明
default	大屏页面内容，按设计尺寸（width × height）布局