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

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

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