vue大屏数据展示屏幕兼容方案

平时开发中，大屏数据是非常常见的，但屏幕的大小不一样，需要一个兼容性方案

首先修改视图的高宽

#app {
  width: 100vw;
  height: 100vh;
  background-color: #020308;
  overflow: hidden;
}

新建一个mixins文件

// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
  width: '1',
  height: '1',
}

// * 设计稿尺寸（px）
const baseWidth = 1880
const baseHeight = 950

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
export default {
  data() {
    return {
      drawTiming: null,
    }
  },
  mounted () {
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    if(this.subscreen){
      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 (currentRate > baseProportion) {
          // 表示更宽
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        } else {
          // 表示更高
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        }
      }
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}

页面引入

<template>
  <div id="center" ref="appRef" >
    这里是echart图标
  </div>
</template>

<script>
import drawMixin from "@/mixin/drawMixin";
export default {
  mixins: [ drawMixin ],
  data() {
    return {
    }
  },
  
}
</script>

<style lang="scss" scoped>
#center {
  color: #d3d6dd;
  width: 1880px;
  height: 950px;
  overflow: hidden;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}
</style>