import { ref } from "vue";
|
// * 堆代码 www.duidaima.com
|
export default function windowResize() {
|
// * 指向最外层容器
|
const screenRef = ref();
|
// * 定时函数
|
const timer = ref(0);
|
// * 默认缩放值
|
const scale = {
|
width: "1",
|
height: "1",
|
};
|
|
// * 设计稿尺寸（px）
|
const baseWidth = 1920;
|
const baseHeight = 1080;
|
// * 需保持的比例（默认1.77778）
|
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
|
const calcRate = () => {
|
// 当前宽高比
|
const currentRate = parseFloat(
|
(window.innerWidth / window.innerHeight).toFixed(5)
|
);
|
if (screenRef.value) {
|
if (currentRate > baseProportion) {
|
// 表示更宽
|
scale.width = (
|
(window.innerHeight * baseProportion) /
|
baseWidth
|
).toFixed(5);
|
scale.height = (window.innerHeight / baseHeight).toFixed(5);
|
screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
|
} else {
|
// 表示更高
|
scale.height = (
|
window.innerWidth /
|
baseProportion /
|
baseHeight
|
).toFixed(5);
|
scale.width = (window.innerWidth / baseWidth).toFixed(5);
|
screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
|
}
|
}
|
};
|
const resize = () => {
|
clearTimeout(timer.value);
|
timer.value = window.setTimeout(() => {
|
calcRate();
|
}, 200);
|
};
|
// 改变窗口大小重新绘制
|
const windowDraw = () => {
|
window.addEventListener("resize", resize);
|
};
|
// 改变窗口大小重新绘制
|
const unWindowDraw = () => {
|
window.removeEventListener("resize", resize);
|
};
|
return {
|
screenRef,
|
calcRate,
|
windowDraw,
|
unWindowDraw,
|
};
|
}
|
