vue2/vue3使用vue2-scale-box进行pc端大屏适配

最新推荐文章于 2025-04-24 07:45:00 发布

果粒橙er

最新推荐文章于 2025-04-24 07:45:00 发布

阅读量3.4k

点赞数 3

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/MissChengispink/article/details/131638131

版权

文章介绍了如何在大屏项目中利用vue2-scale-box或vue3-scale-box插件进行屏幕适配，提供了下载安装方法以及在Vue2和Vue3应用中的具体使用示例，通过设置组件的宽度、高度和延迟属性来实现内容的缩放适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.对于大屏项目，可以采用缩放去适配不同的屏幕，可以用插件vue2-scale-box

1.下载安装

// vue2版本
npm install vue2-scale-box
或者
yarn add vue2-scale-box

//vue3版本
npm install vue3-scale-box
yarn add vue3-scale-box

2.App.vue里使用

// vue2版本
<template>
    <div>
        <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
            <router-view />
        </scale-box>
    </div>
</template>
<script>
import ScaleBox from "vue2-scale-box";
export default {
    components: { ScaleBox },
};
</script>

// vue3版本
<template>
    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
        <router-view />
    </ScaleBox>
</template>
<script>
import ScaleBox from "vue3-scale-box";
</script>