有请求发出时自动加载loading, ( 也可配置为手动打开关闭 )
效果图（loading样式可以自定义）
🏂 自定义组件 loading.vue（图片放在文末）
<template><div class="loading" v-show="msg.show"><div><img src="@/assets/images/loading.gif" alt="" srcset=""></div></div></template><script>export default {props: {msg: Object,aaa: Number}}</script><style scoped lang="less">.loading {width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;div {color: #fff;padding: 6px 15px;}}</style>
🏂 loading.js
import {createApp, reactive } from 'vue'import myLoad from '../components/base/loading.vue'const msg = reactive({show: false,title: '拼命加载中...'})const $loading = createApp(myLoad, {msg}).mount(document.createElement('div'))// console.log($loading);const load = {show(title) {// 控制显示loading的方法msg.show = truemsg.title = titledocument.body.appendChild($loading.$el)},hide() {// 控制loading隐藏的方法msg.show = false}}export {load }// export default {//install(app) {// // console.log(app);// // Vue.prototype.$http = axios// app.config.globalProperties.$loading = load//}// }
🏂 在axios封装的请求里面导入loading.js，例如项目封装文件request.js
在请求时显示loading
import {load} from '@/utils/loading.js'/*** @description axios请求拦截器*/instance.interceptors.request.use((config) => {if (config.data &&config.headers['Content-Type'] ==='application/x-www-form-urlencoded;charset=UTF-8') {config.data = qs.stringify(config.data)}if (debounce.some((item) => config.url.includes(item))) {}load.show() //在这 ~~~~~~~~return config},(error) => {return Promise.reject(error)})
在相应时时关闭loading
/*** @description axios响应拦截器*/instance.interceptors.response.use((response) => {setTimeout(()=>{load.hide();//在这~~~~~~~},300)},(error) => {message.error(message || `后端接口未知异常`)return Promise.reject(error)}})
手动配置指定时刻打开与关闭
在需要使用的组件页面中导入loading.js
import {load } from '@/utils/loading.js';//在需要使用时调用show方法//例如在指定api调用，或者其他耗时操作时打开loadingload.show();//在加载完成时关闭load.hide();
