scale自适应分辨率 实现缩放自适应（vue3）

组件

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

<script setup>
import {
  defineProps,
  onMounted,
  onUnmounted,
  reactive,
  toRef,
  watch,
} from "vue";
import { debounce } from "@/util/scale.ts";
const props = defineProps({
  width: Number,
  height: Number,
});
const width = toRef(props, "width");
const height = toRef(props, "height");
let scale = reactive({
  w: 1,
  h: 1,
});
let getScale = () => {
  // const wh = window.innerHeight / height;
  // const ww = window.innerWidth / width;
  // return [wh,ww];
  const w = window.innerWidth / width.value;
  const h = window.innerHeight / height.value;
  let scale = w < h ? w : h;
  return [scale, scale];
};
let setScale = (e) => {
  // 缩放比
  scale.h = getScale()[0];
  scale.w = getScale()[1];
};
let reCalc = debounce(setScale);
watch(
  () => width.value,
  () => {
    setScale();
  }
);

onMounted(() => {
  setScale();
  window.addEventListener("resize", reCalc);
});
onUnmounted(() => {
  window.removeEventListener("resize", reCalc);
});
</script>
<script>
export default {
  name: "ScaleBox",
};
</script>

<style lang="scss" scoped>
.ScaleBox {
  position: absolute;
  // transform: scale(v-bind('scale.h')) translate(-50%, -50%);
  transform: scale(v-bind("scale.w"), v-bind("scale.h")) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: top left;
  left: 50%;
  top: 50%;
  transition: 0.2s;
  z-index: 999;
  // background: rgba(255, 0, 0, 0.3);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

使用

<script setup lang="ts">
const otherConfig = ref({
  pageWidth: 1920,
  pageHight: 1080,
});
otherConfig.value.pageHight = window.screen.availHeight;
otherConfig.value.pageWidth = window.screen.availWidth;
</script>
<template>
  <ScaleBox
    :width="otherConfig.pageWidth"
    :height="otherConfig.pageHight"
    style="background: #eeeeee"
  >
  //自适应内容
  </ScaleBox>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17