vue 项目的屏幕自适应方案_vue2-scale-box

最新推荐文章于 2024-05-08 11:02:01 发布

2401_84437170

最新推荐文章于 2024-05-08 11:02:01 发布

阅读量445

点赞数 1

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84437170/article/details/138298434

版权

width 宽度默认 1920
height 高度默认 1080
bgc 背景颜色默认 "transparent"
delay自适应缩放防抖延迟时间（ms）默认 100

vue2版本：vue2大屏适配缩放组件（vue2-scale-box - npm）

npm install vue2-scale-box

或者

yarn add vue2-scale-box

使用方法：

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

<style lang="scss">
body {