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

前往低代码交流专区

更多推荐