refer: 优化加载组件

src/components/Loading/index.js

@@ -0,0 +1,17 @@
+import {createVNode, render} from 'vue'
+import Loading from './Loading.vue'
+
+export default {
+    install(app) {
+        const VNode = createVNode(Loading)
+        render(VNode, document.body)
+    },
+    show() {
+        const loading = document.getElementById('loading')
+        loading.style.display = 'block'
+    },
+    close() {
+        const loading = document.getElementById('loading')
+        loading.style.display = 'none'
+    }
+}

src/components/Loading/main.js

@@ -1,111 +0,0 @@
-import Loading from "./Loading.vue";
-
-export const LoadingPlugin = {
-    install(app) {
-        const LoadingCtor = app.component('loading', Loading);
-        app.directive("loading", {
-            mounted: (el, binding, vnode, prevNode) => {
-                el.loading = LoadingCtor;
-                el.loading.$mount();
-                el.appendChild(el.loading.$el);
-                el.classList.add("directiveLoading-parent");
-
-                if (binding.arg) {
-                    el.loading.$el.style.backgroundColor = binding.arg;
-                }
-                if (binding.value) {
-                    if (binding.modifiers.scrollFixed) {
-                        const position = {
-                            top:
-                                el.getBoundingClientRect().top > 0
-                                    ? Math.abs(el.getBoundingClientRect().top)
-                                    : 0,
-                            bottom:
-                                el.getBoundingClientRect().bottom - window.innerHeight > 0
-                                    ? el.getBoundingClientRect().bottom - window.innerHeight
-                                    : 0
-                        };
-                        el.loading.$el.style.top = position.top + "px";
-                        el.loading.$el.style.bottom = position.bottom + "px";
-                    }
-                    el.classList.add("directiveLoading-parent-visible");
-                } else {
-                    el.loading.$el.style.setProperty("display", "none");
-                }
-            },
-
-            updated(el, {value, oldValue, ...binding}) {
-                if (value === oldValue) return;
-                app.nextTick(() => {
-                    if (binding.modifiers.scrollFixed && value) {
-                        const position = {
-                            top:
-                                el.getBoundingClientRect().top < 0
-                                    ? Math.abs(el.getBoundingClientRect().top)
-                                    : 0,
-                            bottom:
-                                el.getBoundingClientRect().bottom - window.innerHeight > 0
-                                    ? el.getBoundingClientRect().bottom - window.innerHeight
-                                    : 0
-                        };
-                        el.loading.$el.style.top = position.top + "px";
-                        el.loading.$el.style.bottom = position.bottom + "px";
-                    }
-                });
-
-                if (value) {
-                    el.classList.add("directiveLoading-parent-visible");
-
-                    el.loading.$el.style.removeProperty("display");
-                } else {
-                    el.loading.$el.style.setProperty("display", "none");
-                    el.classList.remove("directiveLoading-parent-visible");
-                }
-            },
-
-            unmounted(el, binding) {
-                el.loading.close();
-            }
-        });
-
-        const defaultOpts = {target: null, fullscreen: true, lock: false};
-
-        app.config.globalProperties.$loading = function (opts) {
-            opts = Object.assign({}, defaultOpts, opts);
-            let targetParent;
-            if (typeof opts.target === "string") {
-                try {
-                    targetParent = document.querySelector(opts.target);
-                } catch (error) {
-                    targetParent = document.body;
-                }
-            } else if (!opts.target instanceof HTMLElement) {
-                targetParent = document.body;
-            }
-
-            targetParent = opts.target || document.body;
-
-            targetParent.style.position = "relative";
-
-            const loadingIns = LoadingCtor;
-            loadingIns.$mount();
-            targetParent.appendChild(loadingIns.$el);
-
-            if (Object.prototype.toString.call(opts.position) === "[object Object]") {
-                Object.keys(opts.position).forEach(prop => {
-                    loadingIns.$el.style[prop] = opts.position[prop] + "px";
-                });
-            }
-            if (opts.background) {
-                loadingIns.$el.style.background = opts.background;
-            }
-            if (opts.fullscreen) {
-                loadingIns.$el.style.position = "fixed";
-            }
-
-            return loadingIns;
-        };
-    },
-
-
-}

src/main.js

@@ -8,11 +8,11 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import api from './api/api.js'
 
 
-import {LoadingPlugin} from "./components/Loading/main";
+import Loading from "./components/Loading/index.js";
 
 const app = createApp(App)
 app.use(router).use(store)
-app.use(LoadingPlugin)
+app.use(Loading)
 app.config.globalProperties.$api = api
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/Jobs/Jobs.vue

@@ -81,6 +81,7 @@ import {getOffsetTop} from "../../helper/utilities.js";
 import EventBus from "../../helper/EventBus/index.js";
 import InputSearch from '../../components/Input-Search.vue'
 import CheckboxTransfer from "../../components/Checkbox-Transfer.vue";
+import Loading from "../../components/Loading/index.js";
 
 const route = useRoute()
 const {proxy} = getCurrentInstance()
@@ -173,14 +174,10 @@ onMounted(() => {
   getCategory()
   getCity()
   getJobList()
-  const loadingInstance = ElLoading.service({
+  Loading.show()
-    lock: true,
-    text: 'Loading',
-    background: 'rgba(0, 0, 0, 0.7)',
-  })
 
   Promise.all([getCategory, getCity, getJobList]).then(() => {
-    loadingInstance.close()
+    Loading.close()
   })
 })
 

src/views/Login/Login.vue

@@ -44,6 +44,7 @@
 import {reactive, ref, getCurrentInstance} from 'vue'
 import {useStore} from "vuex";
 import {useRouter} from "vue-router";
+import Loading from "../../components/Loading/index.js";
 
 const isLogin = ref(true)
 // 拿到proxy对象，相当于Vue2中的this
@@ -108,23 +109,11 @@ const signButton = async () => {
 // <path fill="#2CBDC3" d="M17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"></path>
 // `
 
-// eleLogo
-const svg = `
-        <path class="path" d="
-          M 30 15
-          L 28 17
-          M 25.61 25.61
-          A 15 15, 0, 0, 1, 15 30
-          A 15 15, 0, 1, 1, 27.99 7.5
-          L 15 15
-        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
-      `
-
 const changeLogin = () => {
-  const loadingInstance1 = ElLoading.service({fullscreen: true, text: '加载中...'})
+  Loading.show()
   setTimeout(() => {
     isLogin.value = !isLogin.value
-    loadingInstance1.close()
+    Loading.close()
   }, 1000)
 }
 </script>