当前位置：首页 > news >正文

【区分vue2和vue3下的element UI Loading 加载组件，分别详细介绍属性，事件，方法如何使用，并举例】

news 2025/12/15 2:13:25

首先，需要澄清的是，Element UI 是为 Vue 2 设计的，而 Element Plus 是 Element UI 的 Vue 3 版本。在 Element UI 和 Element Plus 中，并没有一个直接名为 “Loading 加载” 的独立组件。相反，加载效果通常是通过指令、服务或作为其他组件（如按钮、对话框等）的一个属性来实现的。

下面我将分别为 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 介绍如何实现加载效果，并解释相关的属性、方法或服务。

Vue 2 + Element UI

在 Element UI 中，加载效果可以通过两种方式实现：使用 v-loading 指令或 Loading 服务。

使用 `v-loading` 指令

Element UI 提供了一个 v-loading 指令，可以方便地给任何元素添加加载效果。

属性:

element-loading-text: 用于自定义加载文案。
element-loading-spinner: 用于自定义加载图标类名。
element-loading-background: 用于设置加载遮罩的背景色。

使用方法:
在模板中，你可以通过 v-loading 指令为元素添加加载效果，如：

<template><div v-loading="isLoading" element-loading-text="拼命加载中..."><!-- 内容 --></div>
</template><script>
export default {data() {return {isLoading: false};},mounted() {this.fetchData();},methods: {fetchData() {this.isLoading = true;// 模拟异步数据加载setTimeout(() => {this.isLoading = false;}, 2000);}}
};
</script>

使用 `Loading` 服务

Element UI 也提供了一个 Loading 服务来全屏显示加载效果。

方法:

Loading.service(options): 创建一个全屏的加载实例。options 可以包含自定义文本、图标等。
loadingInstance.close(): 关闭加载实例。

使用方法:
在方法中，你可以通过 Loading.service 创建一个全屏加载效果，如：

<template><el-button @click="showFullScreenLoading">显示全屏加载</el-button>
</template><script>
import { Loading } from 'element-ui';export default {methods: {showFullScreenLoading() {let loadingInstance = Loading.service({ fullscreen: true, text: '加载中...' });setTimeout(() => {loadingInstance.close();}, 2000);}}
};
</script>

Vue 3 + Element Plus

在 Element Plus 中，加载效果的实现与 Element UI 类似，但 API 可能有所不同。

使用 `v-loading` 指令（如果有的话）

在 Element Plus 中，如果提供了 v-loading 指令，其用法应该与 Element UI 类似。你需要查阅 Element Plus 的文档来确认具体的属性和用法。

使用 `ElLoading` 服务

Element Plus 提供了一个 ElLoading 服务来创建加载效果。

方法:

ElLoading.service(options): 创建一个加载实例。options 用于配置加载效果的显示方式、文本等。

使用方法:
在 Vue 3 的 Composition API 中，你可以这样使用 ElLoading 服务：

<template><el-button @click="showLoading">显示加载</el-button>
</template><script setup>
import { ElLoading } from 'element-plus';const showLoading = () => {const loadingInstance = ElLoading.service({fullscreen: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});setTimeout(() => {loadingInstance.close();}, 2000);
};
</script>

请注意，由于 Element Plus 的 API 可能会更新，因此上述代码和选项可能需要根据最新的 Element Plus 文档进行调整。

总的来说，无论是 Element UI 还是 Element Plus，加载效果都是通过指令或服务来实现的，而不是通过一个独立的 “Loading 加载” 组件。因此，在使用时，请确保查阅最新的官方文档以获取准确的信息和示例。