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>