mixin.js

/*  * @Author: jinjianwei  * @Date: 2024-07-24 16:17:16  * @Description: 等比例缩放，屏幕适配 mixin 函数  */  // * 默认缩放值 const scale = {   width: '1',   height: '1', } // * 设计稿尺寸（px） const baseWidth = 1920 const baseHeight = 1080 // * 需保持的比例（默认1.77778） const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))  export default {   data() {     return {       // * 定时函数       drawTiming: null,     }   },   mounted() {     //进入触发     this.calcRate()     window.addEventListener('resize', this.resize)   },   beforeDestroy() {     window.removeEventListener('resize', this.resize)   },   computed: {     getRef() {       return null     }   },   methods: {     calcRate() {       //拿到整个页面元素       let appRef = this.getRef       //如果没有值就结束       if (!appRef) return       // 当前宽高比       const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))       //判断：如果有值代表页面变化了       if (appRef) {         //判断当前宽高比例是否大于默认比例         if (currentRate > baseProportion) {           // 如果大于代表更宽了，就是放大了           //那么把默认缩放的宽高改为：同比例放大           scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)           scale.height = (window.innerHeight / baseHeight).toFixed(5)           console.log(scale.width, scale.height, '放大');           //整个页面的元素样式，缩放宽高用当前同比例放大的宽高           appRef.style.transform = `scale(${scale.width}, ${scale.height})`          } else {           // 如果不大于默认比例代表缩小了。           //那么把默认缩放的宽高改为：同比例缩小           scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)           scale.width = (window.innerWidth / baseWidth).toFixed(5)           console.log(scale.width, scale.height, '缩小');           //整个页面的元素样式，缩放宽高用当前同比例放大的宽高           appRef.style.transform = `scale(${scale.width}, ${scale.height})`         }         //等dom节点加载完后执行         this.$nextTick(() => {           //appRef.getBoundingClientRect() 为获取当前div容器距离windows视图的上边距与左边距           let appRefBoundingClientRect = appRef.getBoundingClientRect()           // 第一种方式           // let finallyTop = this.prevAppRefBoundingClientRect.top === 0 ? -appRefBoundingClientRect.top : (this.prevAppRefBoundingClientRect.top - appRefBoundingClientRect.top)           // let finallyLeft = this.prevAppRefBoundingClientRect.left === 0 ? -appRefBoundingClientRect.left : (this.prevAppRefBoundingClientRect.left - appRefBoundingClientRect.left)           // appRef.style.top = `${finallyTop}px`           // appRef.style.left = `${finallyLeft}px`           // this.prevAppRefBoundingClientRect.top = finallyTop           // this.prevAppRefBoundingClientRect.left = finallyLeft           // 第二种方式           let finallyTop = 0;           let finallyLeft = 0;           if (this.isFirst) {             // 第一次缩放偏移量             finallyTop = appRefBoundingClientRect.top             finallyLeft = appRefBoundingClientRect.left             this.isFirst = false;           } else {             // 第二次变化后的缩放偏移量             finallyTop = this.prevAppRefBoundingClientRect.top * (1 - scale.height) / (1 - this.scalePrev)             finallyLeft = this.prevAppRefBoundingClientRect.left * (1 - scale.height) / (1 - this.scalePrev)           }           // 设置缩放元素偏移量           appRef.style.top = `${-finallyTop}px`;           appRef.style.left = `${-finallyLeft}px`;           this.scalePrev = scale.width;           this.prevAppRefBoundingClientRect.top = finallyTop           this.prevAppRefBoundingClientRect.left = finallyLeft         });       }      },     resize() {       clearTimeout(this.drawTiming)       this.drawTiming = setTimeout(() => {         this.calcRate()       }, 200)     }   } }; 

这里注意要拿到引用组件的dom元素，需要用计算属性。

引用组件里的代码

// html 
  // css #index {   color: #d3d6dd;   //此处的宽高就是你设计稿的尺寸   width: 1920px;   height: 1080px;   //绝对定位 脱离标准流   position: absolute;   //分别将 div容器向左 和 向下 移动50%   top: 50%;   left: 50%;   // 设置以容器左上角为中心，进行缩放移动   transform-origin: left top;   //再将容易往反方向分别移动50%，这样div容器 一直处于可视窗口中心   transform: translate(-50%, -50%);   //超出部位隐藏   overflow: hidden; }  // js import studioMixin from "../../mixin"; mixins: [studioMixin],  computed: {     getRef(){       return this.$refs.domRef     }   },  

参考