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 @   罗砂  阅读(1095)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示