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

posted @ 2024-06-14 09:28  罗砂  阅读(2459)  评论(0)    收藏  举报