SAvatar <s-avatar>

显示个人或企业的图片，没有图片时显示其姓名首字母。 SAvatar 是 Shopify Polaris <s-avatar> web component 的带类型 Vue 3 wrapper。

import { SAvatar } from 'polaris-vue-elements'

最佳实践

• 根据场景选择尺寸。 在表格和列表等紧凑布局中使用较小的 size，在以人物为焦点的个人资料页面上使用较大的尺寸。
• 编写有用的替代文本。 将 alt 设置为头像所代表的人或事物，例如某个人或公司的名称。如果该名称已经以文本形式显示在头像旁边，请改用空的 alt。
• 让头像紧挨它所代表的对象。 将头像放在它所代表的名称或实体旁边，使两者在列表、表格和卡片中的关联一目了然。

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

参阅 Shopify 关于 <s-avatar> 的最佳实践（英文）以获取完整指南。

示例

下方图片从 picsum.photos 加载，这是一个第三方占位图片服务，仅用于演示。

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	类型	说明
alt	string	出于无障碍目的描述头像的替代文本。为使用辅助技术的用户提供头像的文字描述，并在头像加载失败时作为后备内容。写得好的描述能让视障人士理解非文本内容。屏幕阅读器遇到头像时，会朗读此描述。头像加载失败时，此文本会显示在屏幕上，帮助所有用户了解原本要显示的内容。详细了解如何编写有效的替代文本以及 alt 属性。
initials	string	未提供图片或图片加载失败时在头像中显示的姓名首字母。通常为一到两个字符，代表一个人的名和姓的首字母，例如 John Doe 对应 "JD"。
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	头像图片的尺寸。 - small-200：特小头像，适合紧凑的显示或包含大量项目的列表。 - small-100：small 的别名。 - small：小头像，适合次要上下文或紧凑布局。 - base：适用于大多数场景的默认尺寸。 - large：大头像，用于强调或头像作为焦点时。 - large-100：large 的别名。 - large-200：特大头像，用于突出显示。
src	string	头像图片的 URL 或路径。提供后，图片优先于 initials 显示。如果图片加载失败或加载缓慢，将渲染 initials 作为后备。

Events

Event	类型
error	Event
load	Event

在 <SAvatar> 上使用 @error 形式的监听器来监听这些事件。