mkm/company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refer: 优化加载组件

Browse Source
This commit is contained in:
zhangziyu 2023-08-21 15:35:32 +08:00
parent 431594128f
commit 97df4451e5
5 changed files with 25 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Loading/index.js Normal file
View File

@ -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'
}
}

111
src/components/Loading/main.js
View File

@ -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;
};
},
}

4
src/main.js
View File

@ -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)) {

9
src/views/Jobs/Jobs.vue
View File

@ -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()
})
})

17
src/views/Login/Login.vue
View File

@ -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>