vue 大屏适配(vue2和vue3)

 vue2  ScaleBox组件

<template>
  <div
    class="ScaleBox"
    id="ScaleBox"
    :style="{
      width: width + 'px',
      height: height + 'px',
    }"
  >
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 0,
      scale1: 0,
      width: 1920,
      height: 1080,
    };
  },
  created() {},
  mounted() {
    var ScaleBox = document.getElementById("ScaleBox");
    var scale = 0;
    var scale1 = 0;
    var width = 1920;
    var height = 1080;
    var getScale1 = () => {
      // 固定好16：9的宽高比，计算出最合适的缩放比
      var wh = window.innerHeight / height;
      return wh;
    };
    var getScale2 = () => {
      var ww = window.innerWidth / width;
      return ww;
    };
    var setScale = () => {
      // 获取到缩放比例，设置它
      scale = getScale1();
      scale1 = getScale2();
      if (ScaleBox) {
        ScaleBox.style.setProperty("--scale1", scale);
        ScaleBox.style.setProperty("--scale2", scale1);
      }
    };
    setScale();
    window.addEventListener("resize", setScale);
  },
  methods: {},
  components: {},
  computed: {},
};
</script>

<style lang='less' scoped>
#ScaleBox {
  --scale1: 1;
  --scale2: 1;
}
.ScaleBox {
  position: absolute;
  transform: scale(var(--scale2), var(--scale1));
  display: flex;
  flex-direction: column;
  transform-origin: left top;
  left: 0;
  top: 0;
  transition: 0.3s;
}
</style>
  

vue3  ScaleBox组件

<template>
  <div
    class="ScaleBox"
    ref="ScaleBox"
    :style="{
      width: _data.width + 'px',
      height: _data.height + 'px',
    }"
  ></div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
const ScaleBox = ref<HTMLElement | null>(null);

const _data = reactive({
  scale: "0",
  scale1: "0",
  width: 1920,
  height: 1080,
});

const getScale1 = () => {
  const wh = window.innerHeight / _data.height;
  return wh;
};
const getScale2 = () => {
  const ww = window.innerWidth / _data.width;
  return ww;
};

const setScale = () => {
  // 获取到缩放比例，设置它
  _data.scale = getScale1();
  _data.scale1 = getScale2();
  if (ScaleBox) {
    (ScaleBox.value as HTMLElement).style.setProperty("--scale1", _data.scale);
    (ScaleBox.value as HTMLElement).style.setProperty("--scale2", _data.scale1);
  }
};

onMounted(() => {
  setScale();
  window.addEventListener("resize", setScale);
});
</script>

<style lang="scss">
#ScaleBox {
  --scale1: 1;
  --scale2: 1;
}
.ScaleBox {
  position: absolute;
  transform: scale(var(--scale2), var(--scale1));
  display: flex;
  flex-direction: column;
  transform-origin: left top;
  left: 0;
  top: 0;
  transition: 0.3s;
}
</style>