diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
new file mode 100644
index 0000000..25853de
--- /dev/null
+++ b/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'
+ }
+}
\ No newline at end of file
diff --git a/src/components/Loading/main.js b/src/components/Loading/main.js
deleted file mode 100644
index 1ced176..0000000
--- a/src/components/Loading/main.js
+++ /dev/null
@@ -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;
- };
- },
-
-
-}
diff --git a/src/main.js b/src/main.js
index 9e2e667..72912a9 100644
--- a/src/main.js
+++ b/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)) {
diff --git a/src/views/Jobs/Jobs.vue b/src/views/Jobs/Jobs.vue
index 85a8b44..ed1aa87 100644
--- a/src/views/Jobs/Jobs.vue
+++ b/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({
- lock: true,
- text: 'Loading',
- background: 'rgba(0, 0, 0, 0.7)',
- })
+ Loading.show()
Promise.all([getCategory, getCity, getJobList]).then(() => {
- loadingInstance.close()
+ Loading.close()
})
})
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index e6eb25b..d366d9b 100644
--- a/src/views/Login/Login.vue
+++ b/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 () => {
//
// `
-// eleLogo
-const svg = `
-
- `
-
const changeLogin = () => {
- const loadingInstance1 = ElLoading.service({fullscreen: true, text: '加载中...'})
+ Loading.show()
setTimeout(() => {
isLogin.value = !isLogin.value
- loadingInstance1.close()
+ Loading.close()
}, 1000)
}