使用 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 = nullconst showLoading = () => {loading.value = trueloadingInstance = ElLoading.service({lock: true,text: 'Loading...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})// Simulate an async operationsetTimeout(() => {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 组件来实现加载功能了。