vue3+vite全局loading

j-loading.vue组件

<template><transition enter-active-class="animate__animated animate__fadeIn"leave-active-class="animate__animated animate__fadeOut"><div class="root-box" v-if="show"><div class="wrap"><img src="../../assets/img/loading.gif"/></div></div></transition>
</template><script setup>
import {ref} from "vue"
const show = ref(false)const showLoading = () => {show.value = true
}
const hideLoading = (callback) => {show.value = falsecallback && setTimeout(() => callback(), 500)
}defineExpose({show,showLoading,hideLoading
})
//指令使用
// v-jwq-loading="jLoading"//函数使用
// import {getCurrentInstance} from 'vue'
// // 获取当前实例
// const {proxy} = getCurrentInstance()
// 全局显示自定义loading
// const showJwqLoading = () => {
//   proxy.$showLoading()
//   setTimeout(() => {
//     proxy.$hideLoading()
//   }, 2000)
// }
</script><style scoped lang="scss">
.animate__animated.animate__fadeIn {--animate-duration: 0.5s;
}.animate__animated.animate__fadeOut {--animate-duration: 0.5s;
}.root-box {position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: 0;background-color: rgba(255, 255, 255, 0.9);z-index: 2000;display: flex;justify-content: center;align-items: center;.wrap {width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;overflow: hidden;img {width: 100%;//transform: scale(2.5);}}
}
</style>

jLoadding.js

import {createVNode, render, cloneVNode} from "vue"
import jLoading from "./j-loading.vue"export default {install(app) {// 使用vue底层的createVNode方法将组件渲染为虚拟节点const VNode = createVNode(jLoading)// 使用render函数将组件挂载到body中render(VNode, document.body)// 定义全局方法设置组件的显示和隐藏app.config.globalProperties.$showLoading = VNode.component.exposed.showLoadingapp.config.globalProperties.$hideLoading = VNode.component.exposed.hideLoadingconst weakMap = new WeakMap()// 自定义Loading指令app.directive("jwq-loading", {mounted(el) {if (weakMap.get(el)) return//  记录当前绑定元素的positionweakMap.set(el, window.getComputedStyle(el).position)},updated(el, binding) {const oldPosition = weakMap.get(el);// 如果不是position: relative或者absolute，就设置为relative// 这里的目的是确保loading组件正确覆盖当前绑定的元素if (oldPosition !== 'absolute' && oldPosition !== 'relative') {el.style.position = 'relative'}// 克隆一份loading元素,// 作用是当页面上有多个zx-loading时，每个dom都维护一份属于自己的loading，不会冲突const newVNode = cloneVNode(VNode)// 挂载当前节点render(newVNode, el)// 判断绑定的值if (binding.value) {newVNode.component.exposed.showLoading()} else {newVNode.component.exposed.hideLoading(() => {// 还原布局方式el.style.position = oldPosition})}}})}
}

main.js

import jLoading from "./components/j-loading/jLoading.js"
// 引入自定义的全局Loading
app.use(jLoading)

全局设置请求

import jLoading from "@/components/j-loading/j-loading.vue"
import {createVNode, render} from "vue";
const VNode = createVNode(jLoading)
// 使用render函数将组件挂载到body中
render(VNode, document.body)
//开启加载
const showLoading=()=>{VNode.component.exposed.showLoading()
}
//关闭加载
const hideLoading=()=>{VNode.component.exposed.hideLoading()
}
//如get请求演示
/*** 封装get方法* @param url* @param data* @returns {Promise}*/export function get(url, params = {}) {return new Promise((resolve, reject) => {showLoading()//开启loadingaxios.get(url, {params: params}).then(response => {hideLoading()//关闭loadingresolve(response);}).catch(err => {reject(err)})})
}