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 全屏拉伸）。

安装

javascript 复制代码

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

使用示例

javascript 复制代码

<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，支持大屏等比缩放。

安装

javascript 复制代码

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

使用示例

javascript 复制代码

<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：

javascript 复制代码

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 或手动计算比例。