【vue2】v-scale-screen大屏自适应组件
第一步：安装
npm install v-scale-screen 或 yarn add v-scale-screen第二步：main.js中引入
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)第三步：页面使用
<template>
<v-scale-screen width="1920" height="1080">
<div></div>
</v-scale-screen>
</template>注意：
我在安装的时候vue报错了，原来是vue版本的问题，需要vue@2.6.14。
npm install -g @vue/cli@2.16.14
npm install vue-template-compiler@2.6.14 --savev-scale-screen 默认等比例屏幕缩放，当视图不满足比例，上下或左右会有留白（黑框）。如果想要铺满全屏，且对视图拉伸无感，可以配置autoScale，或者将fullScreen设置为true
<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
<div></div>
</v-scale-screen>留白的颜色也可自定义，
<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true" :boxStyle="boxStyle">
<div></div>
</v-scale-screen>原文地址：https://blog.csdn.net/Qxn530/article/details/142324666
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！