Avatar 头像
YhAvatar 用于通过图片、图标或文本占位内容展示用户或对象头像。
基础用法
通过 src、icon 或默认插槽展示头像内容。
基础用法
不同尺寸
size 支持 small、默认、large，也支持直接传入数字像素值。
ABCDYH
不同尺寸
头像形状
通过 shape 在圆形和方形头像之间切换。
CS
头像形状
图片适配
fit 与原生 object-fit 语义一致，用于控制头像中的图片裁剪方式。
图片适配
自定义背景色
可以通过 background-color，或兼容字段 color，自定义头像背景色。
ABYH
自定义背景色
加载失败处理
当图片加载失败时，组件会触发 error 事件，并回退到默认插槽内容。
加载失败处理
在 Nuxt 中使用
接入 @yh-ui/nuxt 后，可直接使用 YhAvatar。头像尺寸、形状、图片地址和文本占位内容都可以参与 SSR 渲染，图片加载与失败回退逻辑会在客户端继续执行。
在 Nuxt 中使用
API
Props
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
shape | 头像形状 | 'circle' | 'square' | 'circle' |
size | 头像尺寸 | number | 'large' | 'default' | 'small' | 'default' |
src | 图片地址 | string | undefined |
src-set | 图片 srcset | string | undefined |
alt | 图片替代文本 | string | undefined |
fit | 图片适配方式 | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'cover' |
icon | 无图片时显示的图标组件或图标名 | string | Component | undefined |
color | 兼容字段，设置头像背景色 | string | undefined |
background-color | 头像背景色 | string | undefined |
style | 内联自定义样式 | CSSProperties | undefined |
crossorigin | 原生图片 crossorigin 属性 | '' | 'anonymous' | 'use-credentials' | 'anonymous' |
theme-overrides | 组件级主题覆盖 | ComponentThemeVars | undefined |
Events
| 名称 | 说明 | 参数 |
|---|---|---|
error | 图片加载失败时触发 | (event: Event) => void |
Slots
| 名称 | 说明 |
|---|---|
default | 自定义头像内容，可放文本或图标 |
Expose
当前组件未暴露公开实例方法或属性。
类型导出
| 名称 | 说明 |
|---|---|
YhAvatarProps | YhAvatar 的 props 类型 |
YhAvatarEmits | YhAvatar 的 emits 类型 |
YhAvatarSlots | YhAvatar 的 slots 类型 |
YhAvatarShape | 头像形状联合类型 |
YhAvatarSize | 头像尺寸联合类型 |
YhAvatarFit | 图片适配联合类型 |
YhAvatarInstance | 组件实例类型 |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-avatar-bg-color | 头像背景色 | var(--yh-color-primary-light-8, #d9ecff) |
--yh-avatar-text-color | 头像文字颜色 | var(--yh-color-primary, #409eff) |
--yh-avatar-radius | 方形头像圆角 | var(--yh-border-radius-base, 4px) |