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>

配置参数

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>

配置参数

3. 关键区别

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