'admin-22.04.30:优化首屏加载loading问题'

CHANGELOG.md

@@ -14,7 +14,7 @@
 - 🎯 优化 图标选择器 [#I4YAHB](https://gitee.com/lyt-top/vue-next-admin/issues/I4YAHB)，感谢[@真有你的](https://gitee.com/sunliusen)
 - 🎯 优化 图标选择器 icon type 类型为 all 时，类型 ali、ele、awe 回显问题
 - 🎯 优化 去掉开发环境 i18n 控制台警告，页面代码：[i18n/index.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/i18n/index.ts)
-- 🎯 优化 登录页添加 `NextLoading.start()` 方法，防止第一次进入界面时出现短暂空白
+- 🎯 优化 `NextLoading.start()` 方法，防止第一次进入界面时出现短暂空白
 - 🎯 优化 地址栏有参数退出登录，再次登录不跳之前界面问题 `src/layout/navBars/breadcrumb/user.vue`
 - 🎯 优化 `SvgIcon` 组件，防止 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
 - 🎯 优化 [wangEditor](https://www.wangeditor.com/) 更新到 v5，[vue3 版本线上示例中 wangeditor 富文本编辑器 demo 实例,无法换行#I5565B](https://gitee.com/lyt-top/vue-next-admin/issues/I5565B)，感谢@[jenchih](https://gitee.com/jenchih)

src/layout/component/main.vue

@@ -24,6 +24,7 @@ import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
+import { NextLoading } from '/@/utils/loading';
 import LayoutParentView from '/@/layout/routerView/parent.vue';
 import Footer from '/@/layout/footer/index.vue';
 
@@ -65,6 +66,7 @@ export default defineComponent({
 		onMounted(async () => {
 			await initGetMeta();
 			initHeaderHeight();
+			NextLoading.done();
 		});
 		// 监听路由变化
 		watch(

src/router/index.ts

@@ -9,7 +9,6 @@ import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useRoutesList } from '/@/stores/routesList';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { Session } from '/@/utils/storage';
-import { NextLoading } from '/@/utils/loading';
 import { staticRoutes, dynamicRoutes } from '/@/router/route';
 import { initFrontEndControlRoutes } from '/@/router/frontEnd';
 import { initBackEndControlRoutes } from '/@/router/backEnd';
@@ -259,7 +258,6 @@ router.beforeEach(async (to, from, next) => {
 // 路由加载后
 router.afterEach(() => {
 	NProgress.done();
-	NextLoading.done();
 });
 
 // 导出路由

src/utils/loading.ts

@@ -14,18 +14,18 @@ export const NextLoading = {
 		div.setAttribute('class', 'loading-next');
 		const htmls = `
 			<div class="loading-next-box">
-			<div class="loading-next-box-warp">
+				<div class="loading-next-box-warp">
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+				</div>
 			</div>
-		</div>
 		`;
 		div.innerHTML = htmls;
 		bodys.insertBefore(div, bodys.childNodes[0]);

src/views/login/index.vue

@@ -31,14 +31,15 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent } from 'vue';
+import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
+import logoMini from '/@/assets/logo-mini.svg';
+import loginIconTwo from '/@/assets/login-icon-two.svg';
+import { NextLoading } from '/@/utils/loading';
 import Account from '/@/views/login/component/account.vue';
 import Mobile from '/@/views/login/component/mobile.vue';
 import Scan from '/@/views/login/component/scan.vue';
-import logoMini from '/@/assets/logo-mini.svg';
-import loginIconTwo from '/@/assets/login-icon-two.svg';
 
 // 定义接口来定义对象的类型
 interface LoginState {
@@ -60,6 +61,10 @@ export default defineComponent({
 		const getThemeConfig = computed(() => {
 			return themeConfig.value;
 		});
+		// 页面加载时
+		onMounted(() => {
+			NextLoading.done();
+		});
 		return {
 			logoMini,
 			loginIconTwo,