Avatar 头像

示例

基础用法

<script lang="ts">
  const avatars = [
    'https://my-avatar-url...',
    'https://my-avatar-url...',
    'https://my-avatar-url...',
    'https://my-avatar-url...',
  ]
</script>

<Avatar src={avatars[0]} shape="circle" />
<Avatar src={avatars[1]} shape="rounded" />
<Avatar src={avatars[2]} shape="square" />
<Avatar src={avatars[3]} shape={12} />

点击事件

<Avatar src={avatars[0]} shape="circle" onClick={handleClick} />

占位头像

<Avatar src="" />

自定义尺寸

<Avatar src={avatars[0]} size={32} />
<Avatar src={avatars[0]} size="48px" />
<Avatar src={avatars[0]} size="4em" />

配合列表使用

<List header="配合列表使用">
  <ListItem description="Deserunt dolor ea eaque eos">
    {#snippet aside()}
      <Avatar src={avatars[0]} />
    {/snippet}
    Novalee Spicer
  </ListItem>
</List>

Avatar

属性

事件

事件	说明	类型
onClick	容器点击事件	(e: MouseEvent) => void
onclick	`` 标签的点击事件	(e: MouseEvent) => void

注意：请使用 onClick，因为 <img> 标签在图片加载失败时会被销毁