封装loading

在components文件夹内新建一个loading组件（loading文件夹内放index.vue）

项目中用到的两张图

<script setup>
//引入loading仓库控制loading显示隐藏
import useLoadingStore from "@/stores/modules/loading";
const loadingStore = useLoadingStore();
//点击蒙版隐藏loading
const loadingClick = () => {
    loadingStore.isLoading = false;
}; 
</script>

<template>
  <div class="loading" v-if="loadingStore.isLoading" @click="loadingClick">
    <div class="loading-bg">
      <img src="@/assets/img/home/full-screen-loading.gif" alt="">
    </div>
  </div>
</template>

<style lang="less" scoped>
.loading {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .loading-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 104px;
    background: url(@/assets/img/home/loading-bg.png) 0 0 /100% 100%;
    img {
      width: 70px;
      height: 70px;
    }
  }
}
</style>

在App.vue中引入loading组件并展示

<script setup>
import loading from "@/components/loading/index.vue"; 
</script>

<template>
    <loading />
</template>

在stores文件夹内新建一个loading仓库loading.js文件

import { defineStore } from "pinia";

const useLoadingStore = defineStore("loading", {
    state: () => ({
        //控制loading显示隐藏
        isLoading: true,
    }),
});
export default useLoadingStore;

在网络请求文件中控制loading，services文件夹内封装axios的文件

// 引入loading仓库
import useLoadingStore from "@/stores/modules/loading";
const loading = useLoadingStore();

// loading开始，写在请求拦截器中
loading.isLoading = true;

// loading取消，在响应拦截器成功和失败的地方各写一个，一共两个
loading.isLoading = false;