大屏适配方案--flexWindow

<template>
  <div class="ScreenAdapter" :style="style">
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  // 参数注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '1080'
    },
    srceenShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      console.log('尺寸变化')
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例。。
    getScale() {
      const div = document.documentElement.getElementsByClassName('largeScreen')
      let widthTemp = 0
      let heightTemp = 0
      if (this.srceenShow) {
        widthTemp = window.innerWidth
        heightTemp = window.innerHeight
      } else {
        widthTemp = div[0].clientWidth
        heightTemp = div[0].clientHeight
      }
      console.log(widthTemp)
      const w = widthTemp / this.width
      const h = heightTemp / this.height
      console.log(w, h, 'ooo');
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      this.style.transform =
          'scale(' + this.getScale() + ') translate(-50%, -50%)'
      console.log('缩放')
    }
  }
}
</script>
  <style lang="scss" scoped>
  .ScreenAdapter {
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s;
  }
  </style>

备注：外层css样式

.full-screen-wrap {
    height: 100vh;
    background-image: url(../../static/img/bg.e7445ed7.png);
    background-size: 100% 100%;
}