一个vue mixin 小案例,实现等比例缩放
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
<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
}
},
原文地址:https://blog.csdn.net/weixin_43045869/article/details/140672246
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!