头像
一个带有备用方案的图片元素，用于代表用户。
PD
功能
- 对图片何时渲染进行自动和手动控制。
- 备用部分接受任何子元素。
- 可选择延迟备用渲染以避免内容闪烁。
安装
从命令行安装此组件。
sh
$ npm add reka-ui结构
导入所有部分并将其组合。
vue
<script setup>
import { AvatarImage, AvatarRoot } from 'reka-ui'
</script>
<template>
<AvatarRoot>
<AvatarImage />
<AvatarFallback />
</AvatarRoot>
</template>API 参考
根
包含头像的所有部分
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'span' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 |
图片
要渲染的图片。默认情况下，它只会在加载完成后渲染。如果需要更多控制，可以使用 @loadingStatusChange 处理程序。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'img' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
crossOrigin | '' | 'anonymous' | 'use-credentials' | |
referrerPolicy | '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | |
src* | string |
| 事件触发 | 载荷 |
|---|---|
loadingStatusChange | [value: ImageLoadingStatus]一个回调函数，提供关于图片加载状态的信息。 |
备用
当图片未加载时（即加载中或出现错误时）渲染的元素。如果您在加载过程中注意到闪烁，可以提供 delayMs 属性来延迟其渲染，使其仅对连接较慢的用户显示。如需更多控制，请使用 AvatarImage 上的 @loadingStatusChange 事件。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'span' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
delayMs | 数字这对于延迟渲染很有用，以便它仅在连接较慢的情况下显示。 |
示例
带工具提示的可点击头像
您可以将头像与工具提示组合使用以显示额外信息。
vue
<script setup>
import { AvatarImage, AvatarRoot, TooltipArrow, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>
<template>
<TooltipRoot>
<TooltipTrigger>
<AvatarRoot>…</AvatarRoot>
</TooltipTrigger>
<TooltipContent side="top">
Tooltip content
<TooltipArrow />
</TooltipContent>
</TooltipRoot>
</template>