vue3自定义全局loading组件

有请求发出时自动加载 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 = true
        msg.title = title
        document.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调用，或者其他耗时操作时打开loading

load.show();

//在加载完成时关闭

load.hide();

🏂 动画图片