前端大屏缩放scale,全屏幕尺寸

一.准备工作

npm i element-resize-detector
npm i --save lodash

这两个包一个是为了监听body尺寸的变化(一开始用的 window.addEventListener(‘resize’, () => {})发现监听有延迟,不是最后变化的尺寸没有达到想要的效果,另外一个需要使用到loadsh.js中的节流函数,这里{ ‘leading’: true, ‘trailing’: true }都设置为true,具体用法可以自己看传送门

二.代码部分

记得给html,body都设置成width:100%;height:100%,不然监听不到高度
新建一个scale.js文件

import elementResizeDetectorMaker from 'element-resize-detector';
import _ from 'lodash';
//大屏伸缩
export default {
    data() {
      return {}
    },
    mounted() {
    const erd = elementResizeDetectorMaker();
    const element = document.body;
    erd.listenTo(element, _.throttle(() => {
      // console.log(element.clientWidth, element.clientHeight);
      this.setScale();
    }, 1000, { 'leading': true, 'trailing': true }));

    },
    methods: {
      setScale() {
        const width = 1920
        const height = 1080
        let containerWidth = document.body.clientWidth
        let containerHeight = document.body.clientHeight

        // console.log('函数中clientWidth',containerWidth,'函数中clientHeight',containerHeight)

        let ww = (Number(containerWidth) / width).toFixed(6)
        let wh = (Number(containerHeight) / height).toFixed(6)
     
        let appRef = this.$refs["appRef"]
        if(appRef){
           appRef.style.setProperty("transform", `scaleX(${ww}) scaleY(${wh}) translate(-50%,-50%)`, "important");
        }
      }
      
    }
  }
  

html部分
在需要使用的地方使用混入mixin引入上面scale.js文件,另外一个就是使用css中scale进行缩放,代码参考下面的appRef样式

<script>
import scale from './mixin/scale';
 export default {
   mixins: [scale],
   components: {
   }
 }
</script>

<template>
      <div class="appRef" id="appRef" ref="appRef"><h1>混入-大屏</h1></div>
</template>

<style scoped>
#data-view{
  position: relative;
  width: 100%;
  height: 100%;
}
.appRef{
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  transition: 0.3s;

  width: 1920px;
  height: 1080px;
 

  background-image: url('设置成你自己的背景图片');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>

总结

祝你成功,有问题及时留言,欢迎指正!