用途: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 提升体验。限制与收费等信息暂未提供。