vue3/vue2大屏适配

vue3-scale-box 和 vue2-scale-box 可以帮助你在不同 Vue 版本中实现大屏自适应缩放。vue3-scale-box - npmvue3 scale box. Latest version: 0.1.9, last published: 2 years ago. Start using vue3-scale-box in your project by running `npm i vue3-scale-box`. There is 1 other project in the npm registry using vue3-scale-box.https://www.npmjs.com/package/vue3-scale-box

1. vue3-scale-box（Vue 3 专用）

功能

• 基于 Vue 3 开发，支持 Composition API 和 <script setup>。

• 自动等比缩放内容，适配不同分辨率（如 1920×1080、4K 等）。

• 提供缩放模式（fit 等比缩放 / full 全屏拉伸）。

安装

npm install vue3-scale-box
# 或
yarn add vue3-scale-box

 使用示例

<template><Vue3ScaleBox:width="1920":height="1080":scaleMode="'fit'":delay="100"><!-- 你的大屏内容 --><div class="dashboard"><h1>Vue 3 大屏适配</h1><ECharts :options="chartOptions" /></div></Vue3ScaleBox>
</template><script setup>
import { ref } from "vue";
import Vue3ScaleBox from "vue3-scale-box";
import ECharts from "vue-echarts";const chartOptions = ref({// ECharts 配置...
});
</script><style>
.dashboard {width: 100%;height: 100%;background: #0f1c3c;color: white;
}
</style>

配置参数

参数	类型	默认值	说明
width	Number	1920	设计稿宽度
height	Number	1080	设计稿高度
scaleMode	'fit' | 'full'	'fit'	fit（等比缩放）/ full（全屏拉伸）
delay	Number	100	窗口调整防抖延迟（ms）

---

2. vue2-scale-box（Vue 2 专用）

功能

• 专为 Vue 2 设计，兼容 Options API。

• 类似 vue3-scale-box，支持大屏等比缩放。

安装

npm install vue2-scale-box
# 或
yarn add vue2-scale-box

使用示例

<template><Vue2ScaleBox:width="1920":height="1080":mode="'fit'"><!-- 你的大屏内容 --><div class="dashboard"><h1>Vue 2 大屏适配</h1><ECharts :options="chartOptions" /></div></Vue2ScaleBox>
</template><script>
import Vue2ScaleBox from "vue2-scale-box";
import ECharts from "vue-echarts";export default {components: { Vue2ScaleBox, ECharts },data() {return {chartOptions: { /* ECharts 配置 */ }};}
};
</script><style>
.dashboard {width: 100%;height: 100%;background: #0f1c3c;color: white;
}
</style>

配置参数

参数	类型	默认值	说明
width	Number	1920	设计稿宽度
height	Number	1080	设计稿高度
mode	'fit' | 'full'	'fit'	fit（等比缩放）/ full（全屏拉伸）

---

3. 关键区别

特性	vue3-scale-box	vue2-scale-box
Vue 版本	Vue 3	Vue 2
API 支持	Composition API	Options API
打包方式	Vite/Rollup	Webpack
事件监听	@scale 事件	@resize 事件

---

4. 常见问题

Q1：内容被拉伸或变形？

• 确保 scaleMode="fit"（等比缩放）。

• 检查内部元素是否使用 % 或 vw/vh 单位。

Q2：缩放不生效？

• 确认父容器有明确的 width 和 height（不能是 auto）。

• 检查是否在 mounted 后动态加载内容（可能需要手动触发 resize）。

Q3：如何兼容移动端？

• 结合媒体查询调整 width/height：

  const isMobile = window.innerWidth < 768;
  <Vue3ScaleBox :width="isMobile ? 750 : 1920" ... />

5. 总结

• Vue 3 项目 → 用 vue3-scale-box（推荐 Vite 构建）。

• Vue 2 项目 → 用 vue2-scale-box（配合 Webpack）。

• 核心逻辑：通过 transform: scale() 实现等比缩放，监听 resize 事件动态调整。

如果需要更复杂的适配（如部分内容不缩放），可以结合 CSS transform-origin 或手动计算比例。