044042fe7e
- 新增 AppLoader 组件作为全局加载器 - 引入 Pinia 状态管理应用加载状态 - 创建 usePageScrollLock 组合式函数管理滚动锁定 - 重构首页动画流程,使用 Promise 链式调用 - 移除旧的 HomeLoader 组件 - 优化头部导航栏的入场动画触发逻辑
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
|
|
import { useNuxtApp } from '#app'
|
|
import type Lenis from 'lenis'
|
|
import { useAppStore } from '~/stores/app'
|
|
|
|
export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
|
|
const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
|
|
|
|
const lockScroll = () => {
|
|
if (import.meta.client) {
|
|
document.documentElement.classList.add('is-home-intro-active')
|
|
$lenis?.scrollTo(0, { immediate: true })
|
|
$lenis?.stop()
|
|
}
|
|
}
|
|
|
|
const unlockScroll = () => {
|
|
if (import.meta.client) {
|
|
document.documentElement.classList.remove('is-home-intro-active')
|
|
$lenis?.start()
|
|
}
|
|
}
|
|
|
|
// If passed a boolean, lock immediately and unlock on unmount
|
|
if (typeof isLocked === 'boolean') {
|
|
if (isLocked) {
|
|
onMounted(() => {
|
|
lockScroll()
|
|
})
|
|
onBeforeUnmount(() => {
|
|
unlockScroll()
|
|
})
|
|
}
|
|
} else {
|
|
// If passed a ref, watch its value
|
|
watch(isLocked, (locked) => {
|
|
if (locked) {
|
|
lockScroll()
|
|
} else {
|
|
unlockScroll()
|
|
}
|
|
}, { immediate: true })
|
|
|
|
onBeforeUnmount(() => {
|
|
unlockScroll()
|
|
})
|
|
}
|
|
|
|
return { lockScroll, unlockScroll }
|
|
}
|