64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<Transition name="fade">
|
|
<div v-if="isLoading" class="elegant-loading">
|
|
<Loading />
|
|
</div>
|
|
</Transition>
|
|
|
|
<Transition name="slide-up">
|
|
<div v-show="!isLoading">
|
|
<DefaultTheme.Layout v-bind="$attrs">
|
|
<template #doc-before>
|
|
<ArticleMetadat />
|
|
</template>
|
|
|
|
<template #doc-footer-before>
|
|
<Backtotop />
|
|
</template>
|
|
</DefaultTheme.Layout>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import DefaultTheme from 'vitepress/theme'
|
|
import ArticleMetadat from './ArticleMetadata.vue';
|
|
import Backtotop from './Backtotop.vue';
|
|
import Loading from './Loading.vue';
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const isLoading = ref(true)
|
|
|
|
onMounted(() => {
|
|
const handleLoad = () => {
|
|
isLoading.value = false
|
|
}
|
|
|
|
// 防止错过load加载完成
|
|
if (document.readyState === 'complete') {
|
|
isLoading.value = false
|
|
return
|
|
}
|
|
|
|
// 加载完成事件
|
|
window.addEventListener('load', handleLoad, { once: true })
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.elegant-loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--vp-c-bg);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
</style> |