taicangPopulation2/src/components/scaleBox/index.vue

<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: 2010,
      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>