用途:el-avatar 是 Element Plus 的头像组件,用于展示用户头像、个人资料图片或实体形象,适用于用户资料、团队成员展示、实体表示以及团队头像组等场景。
主要能力:支持三种内容形式——图片(src)、图标(icon)和文字(默认插槽)。可设置 size(数字或 large/default/small)、shape(circle/square)。图片支持 src-set、alt 原生属性,以及 fit 控制填充方式(fill、contain、cover、none、scale-down,默认 cover)。图片加载失败时触发 error 事件,可通过返回 true 并提供回退内容。
头像组:el-avatar-group 可统一控制组内头像的 size 与 shape,并支持 collapse-avatars 折叠、collapse-avatars-tooltip 悬停显示被折叠头像、max-collapse-avatars 折叠前最大显示数量(默认 1)、effect 提示主题(dark/light,默认 light)和 placement 提示位置(默认 top)。
使用方式:在 Vue 模板中引入并使用,例如 <el-avatar :size="50" :src="avatarUrl" />,方形头像加 shape="square";图标形式需从 @element-plus/icons-vue 引入图标组件,如 UserFilled。
限制与建议:资料未提供安装命令、版本要求、收费或平台信息。建议使用 fit="cover" 保持头像外观一致,并为图片加载错误提供回退内容;团队展示可结合 AvatarGroup 的折叠功能。