一个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）！