手写大屏可视化适配方案Scale—Box

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

    setScale: debounce(function () {
      // 获取到缩放比，设置它
      this.scale = 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.将要自适应的组件包裹起来

代码：

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