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.loadingreturn}// 创建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以及使用的步骤，如果对您有帮助，点个赞再走呀