xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 完成进度条加载

Browse Source
This commit is contained in:
ccnetcore
2025-07-20 16:40:54 +08:00
parent cbe93b9f7e
commit 991a970d6a
3 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Yi.Ai.Vue3/index.html
View File

@@ -16,6 +16,9 @@
<title>%VITE_WEB_TITLE%</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
@@ -33,8 +36,8 @@
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<style>
/* 全局样式 */
* {
@@ -124,7 +127,7 @@
</style>
<script>
// 加载动画逻辑
document.addEventListener('DOMContentLoaded', function () {
// document.addEventListener('DOMContentLoaded', function () {
const loader = document.getElementById('loader');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
@@ -133,7 +136,7 @@
let loadingInterval = null;
let isVueReady = false;
// 注册全局事件监听器，用于接收Vue的加载完成信号
// 注册全局事件监听器，用于接收Vue的加载完成信号（生产环境没有用，所以放到app.vue处理）
window.addEventListener('vue-ready', function () {
isVueReady = true;
completeLoading();
@@ -158,12 +161,12 @@
// 如果进度达到95%或者Vue已经准备好
if (isVueReady) {
progress = 100;
// progress = 100;
clearInterval(loadingInterval);
completeLoading();
}
updateProgress(progress);
// updateProgress(progress);
}, intervalTime);
}
@@ -187,7 +190,7 @@
// 完成加载并隐藏动画
function completeLoading() {
// 确保进度是100%
updateProgress(100);
// updateProgress(100);
// 淡出加载动画
setTimeout(() => {
@@ -200,6 +203,10 @@
// 启动加载动画
startLoading();
});
// });
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

26
Yi.Ai.Vue3/src/App.vue
View File

@@ -1,4 +1,28 @@
<script setup lang="ts"></script>
<script setup lang="ts">
onMounted(() => {
// completeLoading();
// const event = new Event('vue-ready');
// window.dispatchEvent(event);
completeLoading();
});
// 完成加载并隐藏动画
function completeLoading() {
const loader = document.getElementById('loader');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
// 确保进度是100%
progressBar!.style.width = `${100}%`;
progressText!.textContent = `${Math.round(100)}%`;
// 淡出加载动画
setTimeout(() => {
//loader!.style.opacity = '100';
setTimeout(() => {
loader!.style.display = 'none';
}, 500);
}, 300);
}
</script>
<template>
<router-view />

4
Yi.Ai.Vue3/src/main.ts
View File

@@ -12,10 +12,6 @@ import 'element-plus/dist/index.css';
// SVG插件配置
import 'virtual:svg-icons-register';
// 去除加载动画
const event = new Event('vue-ready');
window.dispatchEvent(event);
const app = createApp(App);
app.use(router);