使用 ElLoading 组件来实现加载（loading）功能

在 Element Plus 中，你可以使用 ElLoading 组件来实现加载（loading）功能。ElLoading 通常用于在数据加载或某些异步操作进行时，向用户展示一个覆盖整个页面的加载提示。

以下是如何在你的 Vite + Vue 3 + JavaScript 项目中使用 ElLoading 组件的详细步骤。

1. 安装 Element Plus

首先，确保你已经安装了 Element Plus。如果还没有安装，你可以通过以下命令安装：

npm install element-plus --save

2. 引入 Element Plus

在你的 main.js 文件中引入 Element Plus 和它的样式：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3. 使用 ElLoading 组件

在你的组件中，你可以使用 ElLoading 组件来显示加载提示。以下是一个示例，展示了如何在 <script setup> 语法中使用 ElLoading。

示例组件：

<template>
  <div>
    <el-button @click="showLoading">Show Loading</el-button>
    <div v-if="loading" class="loading-overlay">
      <!-- Loading overlay will be managed by ElLoading instance -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElLoading } from 'element-plus'

const loading = ref(false)
let loadingInstance = null

const showLoading = () => {
  loading.value = true
  loadingInstance = ElLoading.service({
    lock: true,
    text: 'Loading...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  // Simulate an async operation
  setTimeout(() => {
    loadingInstance.close()
    loading.value = false
  }, 3000)
}
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Ensure it covers other content */
}
/* This class is actually not used since the overlay is managed by ElLoading */
</style>

注意事项

1. lock: true：这将锁定页面的其他内容，防止用户交互。如果你不需要锁定页面，可以将其设置为 false。
2. text：你可以自定义加载提示的文本。
3. spinner：你可以自定义加载图标，Element Plus 提供了多个内置图标，你也可以使用自定义的 SVG 或图片。
4. background：你可以自定义加载背景的颜色和透明度。

4. 处理异步操作

在上面的示例中，我们使用了 setTimeout 来模拟一个异步操作。在实际应用中，你可以将 loadingInstance.close() 放在你的异步操作完成后的回调函数中。

通过以上步骤，你就可以在 Vite + Vue 3 + JavaScript 项目中成功地使用 Element Plus 的 ElLoading 组件来实现加载功能了。