SuperAPI AI 工具集

el-skeleton

通用与其它

查看项目

更新于 10-15 23:32

技能介绍

用途:el-skeleton 是 Element Plus 的骨架屏组件,用于在数据加载时展示占位结构,改善加载体验和感知性能。适用于加载状态、内容占位、异步数据加载等场景。

主要能力:基础用法为 <el-skeleton />。可通过 rows 配置行数并配合 animated 显示动画,如 <el-skeleton :rows="5" animated />。支持用 template 插槽自定义骨架结构,内部使用 el-skeleton-item,variant 可取 p、text、h1、h3、caption、button、image、circle、rect,默认 text。用 loading 属性切换真实内容与骨架屏,配合 default 插槽渲染真实 DOM。

使用方式:在 Vue 模板中引入即可,加载完成时将 loading 置为 false。为避免快速加载时闪烁,可设置 throttle(毫秒)作为渲染延迟。

属性:animated(boolean,默认 false)显示动画;count(number,默认 1)假项数量;loading(boolean,默认 false)显示真实 DOM;rows(number,默认 3)行数;throttle(number | object,默认 0)渲染延迟。插槽:default 渲染真实 DOM,template 定义骨架模板。

最佳实践:用 throttle 防止快速加载闪烁;骨架结构尽量与真实内容一致;使用 animated 提升体验。限制与收费等信息暂未提供。