前端大屏自适应实现高清还原设计图 scale

前段时间写过一个实现大屏的 比较简陋 也有些不足的地方 重新优化了一下
可以根据你的屏幕尺寸进行大屏展示 但是必须是16:9的设计图

 <page-resize>
 	//页面dom
 </page-resize>

import pageResize from '@/pages/intelligentoperation/resetScreenSize.vue'

resetScreenSize.vue

components: {
    pageResize
  },

<template>
  <div v-bind:style="styleObject" class="scale-box">
    <slot></slot>
  </div>
</template>

<script>
import debounce from "lodash.debounce"
// const that = this;
export default {
  props: {
    width: {
      type: Number,
      default: 1920,
    },
    height: {
      type: Number,
      default: 1080,
    },
  },
  components: {},
  data () {
    return {
      scale: this.getScale(),
    }
  },
  computed: {
    styleObject () {
      let obj = {
        transform: `scale(${this.scale}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
        width: this.width + "px",
        height: this.height + "px",
      }
      return obj
    }

  },
  mounted () {
    this.getScale()
    window.addEventListener("resize", this.setScale)
  },
  methods: {
    getScale () {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      console.log(window.innerWidth, 'window.innerWidth');
      let ww = window.innerWidth / this.width
      let wh = window.innerHeight / this.height
      return ww < wh ? ww : wh
    },

    setScale: debounce(function () {

      // 获取到缩放比，设置它
      let scale = this.getScale()
      this.scale = scale
      console.log(this.scale, "---")
    }, 10),
  },
  beforeDestroy () {
    window.addEventListener("resize", this.setScale)
  },
}
</script>

<style scoped lang="scss">
.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>