v-scale-screen超级好用的大屏自适应组件

1、安装依赖

npm install v-scale-screen 或 yarn add v-scale-screen

2、vue 引入 vue2中使用插件导入，vue3以组件导入

• vue2 中引入 

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

• vue3 中引入 

  <template>
    <v-scale-screen width="1920" height="1080">
      <div></div>
    </v-scale-screen>
  </template>
   
  <script setup>
  import { defineComponent } from 'vue'
  import VScaleScreen from 'v-scale-screen'
   
  
  
  </script>

   

v-scale-screen 默认等比例屏幕缩放，当视图不满足比例，上下或左右会有留白（黑框）。如果想要铺满全屏，且对视图拉伸无感，可以配置autoScale，或者将fullScreen设置为true

<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
   <div></div>
</v-scale-screen>

也可以自定义留白颜色

<template>
  <div>
    <v-scale-screen ref="scale-screen" width="1920" height="1080" :boxStyle="boxStyle">
      <div></div>
    </v-scale-screen>
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  components: {
    VScaleScreen,
  },
  data() {
    return {
      boxStyle: {
        background: 'linear-gradient(to top ,#00257d, #042f55)'
      },
    }
  },

问题：对element ui 等插件的一下弹出框会有比例失调的问题

v-scale-screen其原理是使用css属性transform实现缩放效果，进行等比例计算，达到等比例缩放的效果。

而我们也可以获取当前的缩放比例，进而对 elementui 组件的样式修改

//获取大屏缩放比例
const val = this.$refs['scale-screen'].$el.children[0].style.transform
this.scale = val

<el-dialog :visible.sync="true" style="{'transform':scale}">
</el-dialog>

借鉴地址：v-scale-screen超级好用的大屏自适应组件-CSDN博客