实现一个类似ElementUI 加载组件的自定义组件

好的，我可以给你提供一个简单的示例，帮助你实现一个类似ElementUI加载组件的自定义组件。

首先，你需要新建一个Vue组件。你可以在组件中添加一个包含加载动画的HTML元素。例如：

<template>
  <div class="loading-wrapper">
    <div class="loader"></div>
  </div>
</template>

然后，你需要在组件中添加一些CSS样式，来制作加载动画。例如：

.loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

最后，你需要在Vue组件中添加一些逻辑代码，来控制加载组件的显示和隐藏。例如：

<template>
  <div v-show="loading" class="loading-wrapper">
    <div class="loader"></div>
  </div>
</template>

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

现在，你就可以在其他Vue组件中使用这个自定义组件了。例如：

<template>
  <div>
    <my-loading v-show="isLoading"></my-loading>
    <button @click="fetchData">点击加载数据</button>
  </div>
</template>

<script>
import MyLoading from './MyLoading.vue'

export default {
  components: {
    MyLoading
  },
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    fetchData() {
      this.isLoading = true
      // 发送请求获取数据
      // 请求完成后隐藏加载组件
      this.isLoading = false
    }
  }
}
</script>

以上就是一个简单的自定义加载组件的实现示例。你可以根据自己的需求，对这个示例进行修改和扩展。