一个vue mixin 小案例，实现等比例缩放

mixin.js

1. /*
2. * @Author: jinjianwei
3. * @Date: 2024-07-24 16:17:16
4. * @Description: 等比例缩放，屏幕适配 mixin 函数
5. */
7. // * 默认缩放值
8. const scale = {
9.   width: '1',
10.   height: '1',
11. }
12. // * 设计稿尺寸（px）
13. const baseWidth = 1920
14. const baseHeight = 1080
15. // * 需保持的比例（默认1.77778）
16. const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
18. export default {
19.   data() {
20.     return {
21.       // * 定时函数
22.       drawTiming: null,
23.     }
24.   },
25.   mounted() {
26.     //进入触发
27.     this.calcRate()
28.     window.addEventListener('resize', this.resize)
29.   },
30.   beforeDestroy() {
31.     window.removeEventListener('resize', this.resize)
32.   },
33.   computed: {
34.     getRef() {
35.       return null
36.     }
37.   },
38.   methods: {
39.     calcRate() {
40.       //拿到整个页面元素
41.       let appRef = this.getRef
42.       //如果没有值就结束
43.       if (!appRef) return
44.       // 当前宽高比
45.       const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
46.       //判断：如果有值代表页面变化了
47.       if (appRef) {
48.         //判断当前宽高比例是否大于默认比例
49.         if (currentRate > baseProportion) {
50.           // 如果大于代表更宽了，就是放大了
51.           //那么把默认缩放的宽高改为：同比例放大
52.           scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
53.           scale.height = (window.innerHeight / baseHeight).toFixed(5)
54.           console.log(scale.width, scale.height, '放大');
55.           //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
56.           appRef.style.transform = `scale(${scale.width}, ${scale.height})`
58.         } else {
59.           // 如果不大于默认比例代表缩小了。
60.           //那么把默认缩放的宽高改为：同比例缩小
61.           scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
62.           scale.width = (window.innerWidth / baseWidth).toFixed(5)
63.           console.log(scale.width, scale.height, '缩小');
64.           //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
65.           appRef.style.transform = `scale(${scale.width}, ${scale.height})`
66.         }
67.         //等dom节点加载完后执行
68.         this.$nextTick(() => {
69.           //appRef.getBoundingClientRect() 为获取当前div容器距离windows视图的上边距与左边距
70.           let appRefBoundingClientRect = appRef.getBoundingClientRect()
71.           // 第一种方式
72.           // let finallyTop = this.prevAppRefBoundingClientRect.top === 0 ? -appRefBoundingClientRect.top : (this.prevAppRefBoundingClientRect.top - appRefBoundingClientRect.top)
73.           // let finallyLeft = this.prevAppRefBoundingClientRect.left === 0 ? -appRefBoundingClientRect.left : (this.prevAppRefBoundingClientRect.left - appRefBoundingClientRect.left)
74.           // appRef.style.top = `${finallyTop}px`
75.           // appRef.style.left = `${finallyLeft}px`
76.           // this.prevAppRefBoundingClientRect.top = finallyTop
77.           // this.prevAppRefBoundingClientRect.left = finallyLeft
78.           // 第二种方式
79.           let finallyTop = 0;
80.           let finallyLeft = 0;
81.           if (this.isFirst) {
82.             // 第一次缩放偏移量
83.             finallyTop = appRefBoundingClientRect.top
84.             finallyLeft = appRefBoundingClientRect.left
85.             this.isFirst = false;
86.           } else {
87.             // 第二次变化后的缩放偏移量
88.             finallyTop = this.prevAppRefBoundingClientRect.top * (1 - scale.height) / (1 - this.scalePrev)
89.             finallyLeft = this.prevAppRefBoundingClientRect.left * (1 - scale.height) / (1 - this.scalePrev)
90.           }
91.           // 设置缩放元素偏移量
92.           appRef.style.top = `${-finallyTop}px`;
93.           appRef.style.left = `${-finallyLeft}px`;
94.           this.scalePrev = scale.width;
95.           this.prevAppRefBoundingClientRect.top = finallyTop
96.           this.prevAppRefBoundingClientRect.left = finallyLeft
97.         });
98.       }
100.     },
101.     resize() {
102.       clearTimeout(this.drawTiming)
103.       this.drawTiming = setTimeout(() => {
104.         this.calcRate()
105.       }, 200)
106.     }
107.   }
108. };

复制代码

这里留意要拿到引用组件的dom元素，必要用计算属性。
引用组件里的代码

1. // html
2. <div  ref="domRef" id="index"><div>
4. // css
5. #index {
6.   color: #d3d6dd;
7.   //此处的宽高就是你设计稿的尺寸
8.   width: 1920px;
9.   height: 1080px;
10.   //绝对定位 脱离标准流
11.   position: absolute;
12.   //分别将 div容器向左 和 向下 移动50%
13.   top: 50%;
14.   left: 50%;
15.   // 设置以容器左上角为中心，进行缩放移动
16.   transform-origin: left top;
17.   //再将容易往反方向分别移动50%，这样div容器 一直处于可视窗口中心
18.   transform: translate(-50%, -50%);
19.   //超出部位隐藏
20.   overflow: hidden;
21. }
23. // js
24. import studioMixin from "../../mixin";
25. mixins: [studioMixin],
27. computed: {
28.     getRef(){
29.       return this.$refs.domRef
30.     }
31.   },

复制代码

参考

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。