大屏可视化留白解决方案

1.自定义ScaleBox组件

<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>

2.将ScaleBox引入包裹要自适应的组件

<template>
  <ScaleBox>
    <!--要自适应的页面-->
    <!-- <div></div> -->
  </ScaleBox>
</template>

<script>
import ScaleBox from "@/components/ScaleBox";

export default {
  components: {
    ScaleBox,
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>