阅读量:0
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 } }, 