SuperAPI AI 工具集

el-loading

设计与创作

查看项目

更新于 10-15 23:32

技能介绍

用途:Element Plus 的 Loading 组件用于在数据加载期间显示动画,提供加载状态与异步操作反馈,常见于数据加载、异步操作反馈、表单提交和页面切换等场景。

主要能力:支持指令与服务两种调用方式。指令方式使用 v-loading 绑定布尔值或 LoadingOptions,并可通过 element-loading-text、element-loading-spinner、element-loading-background 设置文字、图标与背景色。服务方式通过 ElLoading.service 以编程方式创建实例,可指定 target、text、spinner、background 等选项,并调用实例的 close 方法关闭。

配置项:target(覆盖的 DOM 节点,默认 document.body)、body(是否追加到 body,默认 false)、fullscreen(全屏模式,默认 true)、lock(锁定滚动,默认 false)、text、spinner、background、customClass、svg、svgViewBox。

用法示例:指令方式为 <el-table v-loading="loading" :data="tableData">;服务方式为 const loading = ElLoading.service({ lock: true, text: 'Loading...', background: 'rgba(0, 0, 0, 0.7)' }),随后调用 loading.close() 关闭。

最佳实践:组件级加载使用 v-loading 指令,需要程序化控制时使用 ElLoading.service,加载期间可设置 lock 防止滚动。

限制:资料未提供收费、价格、平台兼容性等更多信息。