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

 v-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）！