Vues数据大屏适配scale缩放方案

最新推荐文章于 2025-06-08 09:12:22 发布

原创

最新推荐文章于 2025-06-08 09:12:22 发布 · 584 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

1.首先在utils文件夹下创建一个drawMixin.js文件

// 屏幕适配 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)
  },
  methods: {
    calcRate () {
      const appRef = this.$refs["appRef"]
      if (!appRef) return
      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (appRef) {
        if (currentR