SuperAPI AI 工具集

el-avatar

前端与建站

查看项目

更新于 10-15 23:32

技能介绍

用途: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 的折叠功能。