vue3 封装一个全局loading组件

好的，以下是一个简单的全局loading组件的封装示例：

<template>
  <div v-if="loading" class="loading">
    <div class="spinner"></div>
    <div class="text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'GlobalLoading',
  data() {
    return {
      loading: false,
      text: 'Loading...',
    };
  },
  methods: {
    show(text = 'Loading...') {
      this.loading = true;
      this.text = text;
    },
    hide() {
      this.loading = false;
      this.text = 'Loading...';
    },
  },
};
</script>

<style scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-top-color: #1e88e5;
  animation: spin 1s ease-in-out infinite;
}

.text {
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

在需要显示loading的地方，可以调用 `this.$loading.show()` 方法显示loading，调用 `this.$loading.hide()` 方法隐藏loading。

需要注意的是，在使用前需要在Vue的根实例中进行全局注册：

import GlobalLoading from './GlobalLoading.vue';

const app = createApp(App);

// 注册全局loading组件
app.component('GlobalLoading', GlobalLoading);

app.mount('#app');

这样，就可以在任意组件中使用全局loading组件了。