Startseite Erkunden Hilfe
Registrieren Anmelden
jiaxiaoqiang
/
JG-CLIENT-TEMP
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

feature/全屏loading页面

dy vor 10 Monaten
Ursprung
bd01f49100
Commit
d9f06a9472
8 geänderte Dateien mit 108 neuen und 6 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 0 1
      index.html
  2. 1 0
      package.json
  3. 0 1
      src/App.vue
  4. 17 0
      src/components/FullLoading/index.ts
  5. 58 0
      src/components/FullLoading/index.vue
  6. 13 2
      src/main.ts
  7. 19 1
      src/plugins/permission.ts
  8. 0 1
      src/router/modules/process.ts

+ 0 - 1
index.html
Datei anzeigen 

@@ -17,7 +17,6 @@
 
 
   <body>
 
     <div id="app">
 
-      <div class="loader"></div>
 
     </div>
 
   </body>
 
   <script src="/src/main.ts" type="module"></script>

+ 1 - 0
package.json
Datei anzeigen 

@@ -45,6 +45,7 @@
 
     "@smallwei/avue": "^3.3.3",
 
     "@types/smallwei__avue": "^3.0.5",
 
     "@types/uuid": "^9.0.8",
 
+    "@vue/runtime-core": "^3.4.27",
 
     "@vueuse/core": "^10.9.0",
 
     "@wangeditor/editor": "^5.1.23",
 
     "@wangeditor/editor-for-vue": "5.1.10",

+ 0 - 1
src/App.vue
Datei anzeigen 

@@ -22,7 +22,6 @@ import { ThemeEnum } from "@/enums/ThemeEnum";
 
 
 const appStore = useAppStore();
 
 const settingsStore = useSettingsStore();
 
-
 
 const locale = computed(() => appStore.locale);
 
 const size = computed(
 
   () => appStore.size as "default" | "small" | "large" | undefined

+ 17 - 0
src/components/FullLoading/index.ts
Datei anzeigen 

@@ -0,0 +1,17 @@
 
+// /components/Loading/index.ts
 
+import type { App, VNode } from "vue";
 
+import { createVNode, render } from "vue";
 
+import Loading from "./index.vue";
 
+
 
+export default {
 
+  install(app: App) {
 
+    const Vnode: VNode = createVNode(Loading);
 
+    render(Vnode, document.body);
 
+    app.provide("isShow", Vnode.component?.exposed?.isShow);
 
+    app.config.globalProperties.$loading = {
 
+      show: Vnode.component?.exposed?.show,
 
+      hide: Vnode.component?.exposed?.hide,
 
+      isShow: Vnode.component?.exposed?.isShow,
 
+    };
 
+  },
 
+};

+ 58 - 0
src/components/FullLoading/index.vue
Datei anzeigen 

@@ -0,0 +1,58 @@
 
+<template>
 
+  <!--  components/Loading/index.vue-->
 
+  <div v-show="isShow" class="loading">
 
+    <div>
 
+      <div class="loading-content">
 
+        <img src="../../../public/logo.png" object-fit="cover" />
 
+      </div>
 
+      <div class="titleText">正在加载...</div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup lang="ts">
 
+import { ref } from "vue";
 
+const isShow = ref(false); //定位loading 的开关
 
+
 
+const show = () => {
 
+  isShow.value = true;
 
+};
 
+const hide = () => {
 
+  isShow.value = false;
 
+};
 
+//对外暴露 当前组件的属性和方法
 
+defineExpose({
 
+  isShow,
 
+  show,
 
+  hide,
 
+});
 
+</script>
 
+
 
+<style scoped lang="scss">
 
+.loading {
 
+  position: fixed;
 
+  z-index: 999999;
 
+  inset: 0;
 
+  background: #f1f3f5;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  width: 100vw;
 
+  height: 100vh;
 
+  @include flex;
 
+  .loading-content {
 
+    animation: rotate 4s linear infinite;
 
+  }
 
+  .titleText {
 
+    margin-top: 10px;
 
+  }
 
+  @keyframes rotate {
 
+    from {
 
+      transform: rotate(0deg);
 
+    }
 
+    to {
 
+      transform: rotate(360deg);
 
+    }
 
+  }
 
+}
 
+</style>

+ 13 - 2
src/main.ts
Datei anzeigen 

@@ -4,6 +4,7 @@ import router from "@/router";
 
 import { setupStore } from "@/store";
 
 import { setupDirective } from "@/directive";
 
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
 
+import Loading from "./components/FullLoading/index";
 
 
 // 本地SVG图标
 
 import "virtual:svg-icons-register";
 
@@ -18,6 +19,17 @@ import "animate.css";
 
 import { setupEleAvue } from "@/plugins";
 
 
 const app = createApp(App);
 
+type Lod = {
 
+  show: () => void;
 
+  hide: () => void;
 
+  isShow: boolean;
 
+};
 
+declare module "@vue/runtime-core" {
 
+  export interface ComponentCustomProperties {
 
+    $loading: Lod;
 
+  }
 
+}
 
+
 
 // 全局注册 自定义指令(directive)
 
 setupDirective(app);
 
 // 全局注册 状态管理(store)
 
@@ -30,5 +42,4 @@ setupI18n(app);
 
 setupPermission();
 
 
 setupEleAvue(app);
 
-
 
-app.use(router).mount("#app");
 
+app.use(Loading).use(router).mount("#app");

+ 19 - 1
src/plugins/permission.ts
Datei anzeigen 

@@ -2,13 +2,24 @@ import router from "@/router";
 
 import NProgress from "@/utils/nprogress";
 
 import { useDictionaryStore } from "@/store/modules/dictionary";
 
 import { getUserDicts } from "@/api/auth";
 
-
 
 export function setupPermission() {
 
   // 白名单路由
 
   const whiteList: string[] = ["client-traceability"]; //由于包含动态路由，这里面存储的是路由的name而不是path
 
 
   router.beforeEach(async (to, from, next) => {
 
     NProgress.start();
 
+    //在路由跳转前判断是否为不需要全屏加载的二级路由界面(目前项目中只有pro-step界面涉及)
 
+    const isShow = inject("isShow");
 
+    const route = useRoute();
 
+    if (
 
+      !(
 
+        route.fullPath.substr(0, 11) == "/pro-steps/" &&
 
+        to.fullPath.substr(0, 11) == "/pro-steps/"
 
+      )
 
+    ) {
 
+      //@ts-ignore
 
+      isShow.value = true;
 
+    }
 
     const hasToken = localStorage.getItem("token");
 
     if (hasToken) {
 
       if (to.path === "/login") {
 
@@ -50,6 +61,13 @@ export function setupPermission() {
 
   });
 
 
   router.afterEach(() => {
 
+    const isShow = inject("isShow");
 
+    const route = useRoute();
 
+    //@ts-ignore
 
+    if (isShow.value == true) {
 
+      //@ts-ignore
 
+      isShow.value = false;
 
+    }
 
     NProgress.done();
 
   });
 
 }

+ 0 - 1
src/router/modules/process.ts
Datei anzeigen 

@@ -164,7 +164,6 @@ export default {
 
   ],
 
   beforeEnter: (to, from, next) => {
 
     const store = useUserStore();
 
-    console.log(store.user.stationType, "222");
 
     if (store.user.stationType == "5") {
 
       next({ path: "/prepare" });
 
     } else {