Avatar 头像
EwAvatar 展示用户或团队头像。图片缺失或加载失败时自动回退到姓名首字(中文名取前两字、 英文名取两词首字母),也可以直接给图标。圆形为默认形态,square 适合应用/品牌图标。
基础用法
回退规则与形态
无图时姓名首字自动兜底;square 形态适合应用图标。
林一AL
vue
<EwAvatar name="林一舟" />
<EwAvatar name="Ada Lovelace" />
<EwAvatar icon="github" shape="square" />尺寸
预设尺寸与自定义像素
small 28 / default 40 / large 56,也可传数字自定义。
小中大72
vue
<EwAvatar name="中" />
<EwAvatar :src="user.avatar" size="large" />
<EwAvatar name="自定义" :size="72" />头像组
多人层叠展示(团队、参与者列表)用 EwAvatarGroup,支持溢出折叠为 +N。
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| src | 图片地址(加载失败自动回退) | string | — |
| name | 姓名(无图时的回退文案) | string | — |
| icon | 图标名(无图时的另一种回退) | string | — |
| alt | 图片 alt 文案(缺省取 name) | string | name |
| size | 尺寸:预设或像素数值 | 'small' | 'default' | 'large' / number | 'default' |
| shape | 形态 | 'circle' | 'square' | 'circle' |