<template>
    <div v-bind:style="styleObject" class="scale-box">
      <slot></slot>
    </div>
  </template>
   
  <script>
  import debounce from "lodash.debounce";
  const that = this;
  export default {
    components: {},
    data() {
      return {
        width: 1920,
        height: 1080,
        scaleX: null,
        scaleY: null,
      };
    },
    computed: {
      styleObject() {
        let obj = {
          transform: `scale(${this.scaleX},${this.scaleY}) translate(-50%, -50%)`,
          WebkitTransform: `scale(${this.scaleX},${this.scaleY}) translate(-50%, -50%)`,
          width: this.width + "px",
          height: this.height + "px",
        };
        return obj;
      },
    },
    mounted() {
      this.getScale();
      window.addEventListener("resize", this.setScale);
    },
    methods: {
      getScale() {
        // 分别计算X轴和Y轴的缩放比例
        this.scaleX = window.innerWidth / this.width;
        this.scaleY = window.innerHeight / this.height;
      },
   
      setScale: debounce(function () {
        // 获取到缩放比，设置它
        this.getScale();
      }, 500),
    },
    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>
   