当前位置：首页 > news >正文

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

news 2025/8/15 2:34:00

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.topfinallyLeft = appRefBoundingClientRect.leftthis.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 = finallyTopthis.prevAppRefBoundingClientRect.left = finallyLeft});}},resize() {clearTimeout(this.drawTiming)this.drawTiming = setTimeout(() => {this.calcRate()}, 200)}}
};

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

引用组件里的代码

// html
<div  ref="domRef" id="index"><div>// 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}},