Loading 加载 ​

加载数据时显示动效。

区域加载 ​

在 table 等容器中加载数据时显示。

自定义 ​

可自定义加载文案、加载动画和背景色。

整页加载 ​

加载数据时显示整页的动效。

服务 ​

您也可以使用服务的方式调用 Loading。 引入 Loading 服务

import { ElLoading } from 'element-plus'

调用它

ElLoading.service(options)

options 参数为 Loading 的配置项，具体见下表。 LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它：

const loadingInstance = ElLoading.service(options)
nextTick(() => {
  // Loading should be closed asynchronously
  loadingInstance.close()
})

需要注意的是，在這種情況下，全屏的 Loading 是單例的。 如果在一個全屏 Loading 關閉前再次调用全屏 Loading，那么該函數不會創建一個新的 Loading 實例，而是返回現在的全屏 Loading 的實例：

const loadingInstance1 = ElLoading.service({ fullscreen: true })
const loadingInstance2 = ElLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true

调用其中任意一个的 close 方法都能关闭这个全屏的 Loading。

如果完整引入了 Element Plus，那么 Vue 的每个组件实例都会自动注入 $loading 方法，你可以在组件内像这样调用：this.$loading(options)。 它同样会返回一个 Loading 实例。

应用上下文继承 2.9.10 ​

现在 loading 接受一个 context 作为 loading 构造函数的第二个参数，它允许您将当前应用程序的上下文注入到 loading 中，这允许您继承应用程序的所有属性。

您可以像这样使用它

import { getCurrentInstance } from 'vue'
import { ElLoading } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
ElLoading.service({}, appContext)

API ​

配置项 ​

指令 ​

来源 ​

组件 • 样式 • 文档

贡献者 ​