vue3封装全局loading

在Vue3中，我们可以使用`provide`和`inject`来实现全局loading的封装。首先，在根组件中创建一个loading组件：

<template>
  <div v-if="loading" class="loading-mask">
    <div class="loading-spinner"></div>
  </div>
  <slot></slot>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    show() {
      this.loading = true
    },
    hide() {
      this.loading = false
    }
  }
}
</script>

<style>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-top-color: #888;
  border-radius: 50%;
  animation: loading-spinner 0.8s linear infinite;
}
@keyframes loading-spinner {
  to {
    transform: rotate(360deg);
  }
}
</style>

然后，在根组件中提供`loading`实例：

<template>
  <loading v-slot="{ show, hide }"></loading>
  <router-view></router-view>
</template>

<script>
import Loading from '@/components/Loading.vue'

export default {
  provide: {
    loading: new Loading()
  }
}
</script>

接下来，在需要使用loading的组件中使用`inject`注入`loading`实例，然后调用`show()`和`hide()`方法即可：

<template>
  <div>
    <button @click="getData">加载数据</button>
  </div>
</template>

<script>
export default {
  inject: ['loading'],
  methods: {
    async getData() {
      try {
        this.loading.show()
        // 请求数据
      } catch (e) {
        console.error(e)
      } finally {
        this.loading.hide()
      }
    }
  }
}
</script>

这样，我们就实现了一个简单的全局loading组件的封装。