33 lines
937 B
TypeScript
33 lines
937 B
TypeScript
// 自定义 Hook
|
|
export const useScreenAuto = (designWidth = 1920, designHeight = 1080) => {
|
|
|
|
const screenEl = useTemplateRef<HTMLDivElement>("screen")
|
|
const handleScreenAuto = () => {
|
|
const clientWidth = document.documentElement.clientWidth
|
|
const clientHeight = document.documentElement.clientHeight
|
|
|
|
const scale = clientWidth / clientHeight < designWidth / designHeight
|
|
? clientWidth / designWidth
|
|
: clientHeight / designHeight
|
|
|
|
if (screenEl.value) {
|
|
screenEl.value.style.transform = `scale(${scale}) translate(-50%, -50%)`
|
|
screenEl.value.classList.add('screen')
|
|
}
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
handleScreenAuto()
|
|
window.addEventListener('resize', handleScreenAuto)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleScreenAuto)
|
|
})
|
|
|
|
return {
|
|
handleScreenAuto
|
|
}
|
|
}
|