79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
||
<div class="ScaleBox" ref="ScaleBox"
|
||
:style="{
|
||
width: width + 'px',
|
||
height: height + 'px',
|
||
}"
|
||
>
|
||
<slot></slot>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "ScaleBox",
|
||
props: {},
|
||
data() {
|
||
return {
|
||
scale: 0,
|
||
width: 1920,
|
||
height: 1080,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.setScale();
|
||
window.addEventListener("resize", this.debounce(this.setScale));
|
||
},
|
||
methods: {
|
||
getScale() {
|
||
// 固定好16：9的宽高比，计算出最合适的缩放比
|
||
const { width, height } = this;
|
||
const wh = window.innerHeight / height;
|
||
const ww = window.innerWidth / width;
|
||
console.log(ww < wh ? ww : wh);
|
||
return ww < wh ? ww : wh;
|
||
},
|
||
setScale() {
|
||
// 获取到缩放比例，设置它
|
||
this.scale = this.getScale();
|
||
if (this.$refs.ScaleBox) {
|
||
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
|
||
}
|
||
},
|
||
debounce(fn, delay) {
|
||
const delays = delay || 500;
|
||
let timer;
|
||
return function () {
|
||
const th = this;
|
||
const args = arguments;
|
||
if (timer) {
|
||
clearTimeout(timer);
|
||
}
|
||
timer = setTimeout(function () {
|
||
timer = null;
|
||
fn.apply(th, args);
|
||
}, delays);
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
#ScaleBox {
|
||
--scale: 1;
|
||
}
|
||
.ScaleBox {
|
||
position: absolute;
|
||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transform-origin: 0 0;
|
||
left: 50%;
|
||
top: 50%;
|
||
transition: 0.2s;
|
||
z-index: 999;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style> |