vue3中自定义加载组件

首先创建 Loading.vue 文件

<template>
  <div id="loading" v-show="visible">
    <div class="circle"></div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Loading",
  setup() {
    // 控制组件的状态
    let visible = ref(false);

    // 显示组件
    let showLoading = () => {
      visible.value = true;
    };
    // 隐藏组件
    let hideLoading = () => {
      visible.value = false;
    };

    return { visible, showLoading, hideLoading };
  },
});
</script>
<style scoped>
#loading {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes loading {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(160deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 6px solid #222;
  border-left-color: #ccc;

  animation: loading 1s linear 1s infinite;
}
</style>

其次在Loading.vue文件同级目录中下创建index.js文件，这个文件将把Loading插件进行注册，解释都在注释中

import { createApp } from "vue"

// 导入写好的Loading.vue文件
import Loading from "./Loading.vue"

export default {
  loading: null,
  // 每当这个插件被添加到应用程序中时，如果它是一个对象，就会调用 install 方法。如果它是一个 function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。
  install(app) {
    if (this.loading) {
      // 防止多次载入
      app.config.globalProperties.$loading = this.loading
      return
    }
	// 创建Loading实例，用于挂载
    let instance = createApp(Loading)
    // 创建div元素装载Loading对象
    let div = document.createElement("div")
    let body = document.body
	// 导入body中
    body.appendChild(div)
    this.loading = instance.mount(div)
	// 挂载vue身上
    app.config.globalProperties.$loading = this.loading;
  }
}

接着在 main.js 入口中进行添加到应用程序中

import { createApp } from 'vue'
import App from './App.vue'
// 自定义loading插件
import Loading from "@/components/loading/index"
const app = createApp(App)
app.use(Loading)
  
app.mount('#app')

export default app  // 这里导出app的目的，是为了在后面演示js文件中使用插件

使用插件

• 在vue文件中使用

  import { defineComponent, getCurrentInstance } from "vue";
  export default defineComponent({
    name: "App",
    setup() {
    	// 获取当前组件的实例
      let { proxy } = getCurrentInstance();
  	// 调用插件方法
      proxy.$loading.show();
  
      setTimeout(() => {
        proxy.$loading.hide();
      }, 5000);
  
      return {};
    },
  });
  

• 在js文件中使用，这里演示在封装的网络请求方法中使用

  import axios from "axios";
  // 获取vue对象
  import app from "../main"
  
  export default function request(config) {
  
    // 使用加载插件
    app.config.globalProperties.$loading.showLoading()
  
    // 获取实例
    let instance = axios.create({
      baseURL: "http://localhost:3000",
      timeout: 30000,
      withCredentials: true,
    })
  
  
    instance.interceptors.request.use(
      (config) => {
        return config;
      },
      error => {
        // 关闭加载插件
        app.config.globalProperties.$loading.hideLoading()
        console.log(error)
      })
  
  
    instance.interceptors.response.use(
      (response) => {
        // 关闭加载插件
        app.config.globalProperties.$loading.hideLoading()
        if (response.status == 200) {
          return Promise.resolve(response.data)
        }
      },
      error => {
        // 关闭加载插件
        app.config.globalProperties.$loading.hideLoading()
        console.log(error)
      }
    )
  
    return instance(config)
  
  }
  

以上就是演示自定义loading以及使用的步骤，如果对您有帮助，点个赞再走呀