vue3/vue2大屏适配

vue3-scale-boxvue2-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:缩放不生效?

  • 确认父容器有明确的 widthheight(不能是 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 或手动计算比例。

相关推荐
天天鸭4 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿9 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨18 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭26 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆29 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼39 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子41 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆42 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了42 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js