49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
// 创建全局状态，记录语言切换是否正在进行中
|
|
const isChangingLanguage = ref(false)
|
|
|
|
export function useLanguageTransition() {
|
|
const { locale } = useI18n()
|
|
|
|
// 平滑切换语言的函数
|
|
function smoothSwitchLanguage(newLocale: string) {
|
|
if (locale.value === newLocale) return
|
|
|
|
// 标记切换开始
|
|
isChangingLanguage.value = true
|
|
|
|
// // 保存当前滚动位置
|
|
// const scrollPosition = window.scrollY
|
|
|
|
// 添加切换中的标记到body元素
|
|
document.body.setAttribute('i18n-in-progress', 'true')
|
|
|
|
// 延迟执行实际的语言切换，让淡出动画有时间执行
|
|
setTimeout(() => {
|
|
// 切换语言
|
|
locale.value = newLocale
|
|
|
|
// 延迟恢复，让新语言内容有时间渲染
|
|
setTimeout(() => {
|
|
// 移除切换中的标记
|
|
document.body.removeAttribute('i18n-in-progress')
|
|
|
|
// // 恢复滚动位置
|
|
// window.scrollTo({
|
|
// top: scrollPosition,
|
|
// behavior: 'auto'
|
|
// })
|
|
|
|
// 标记切换结束
|
|
isChangingLanguage.value = false
|
|
}, 50) // 调整此值以适应渲染速度
|
|
}, 300) // 与CSS过渡时间匹配
|
|
}
|
|
|
|
return {
|
|
isChangingLanguage,
|
|
smoothSwitchLanguage
|
|
}
|
|
}
|