Avatar 头像

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

头像组件

import { DuAvatar } from 'dangoui'

示例

各种类型的头像

<template>
  <PreviewBlock title="不同类型的头像">
    <DuAvatar type="primary" size="large" :src="avatar" bordered />
    <DuAvatar type="trade" size="large" :src="avatar" bordered />
    <DuAvatar type="success" size="large" :src="avatar" bordered />
    <DuAvatar type="error" size="large" :src="avatar" bordered />
    <DuAvatar type="default" size="large" :src="avatar" bordered />
    <DuAvatar type="white" size="large" :src="avatar" bordered />
  </PreviewBlock>
  <PreviewBlock title="不同大小的头像">
    <div class="flex flex-col gap-2">
      <DuAvatar size="mini" :src="avatar" bordered />
      <DuAvatar size="small" :src="avatar" bordered />
      <DuAvatar size="normal" :src="avatar" bordered />
      <DuAvatar size="medium" :src="avatar" bordered />
      <DuAvatar size="large" :src="avatar" bordered />
    </div>
  </PreviewBlock>
  <PreviewBlock title="自定义头像">
    <DuAvatar size="large" bordered>
      +1
    </DuAvatar>
  </PreviewBlock>
  <PreviewBlock title="头像组">
    <DuAvatarGroup size="large" :avatars="[avatar, avatar, avatar, avatar, avatar]" bordered limit="3" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuAvatar, DuAvatarGroup } from 'dangoui'

const avatar = ref('https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg')

function onClick() {
  console.log('[demo] avatar clicked')
}
</script>

Avatar API

属性

属性名	类型	默认值	说明
type	`"default" \| "primary" \| "trade" \| "success" \| "error" \| "white"`	`"default"`	头像类型
size	`"normal" \| "mini" \| "small" \| "medium" \| "large"`	`"normal"`	头像大小
bordered	`boolean`	`false`	是否展示外边框
ext-class	`string \| string[] \| Record<string, boolean>`	`""`	自定义 class
ext-style	`string \| { [x: string]: string \| number; }`	`""`	自定义 style
src	`string`	-	src

插槽

名称
default

AvatarGroup API

属性

属性名	类型	默认值	说明
type	`"default" \| "primary" \| "trade" \| "success" \| "error" \| "white"`	`"default"`	头像类型
reverse	`boolean`	`false`	层级是否倒序
size	`"normal" \| "mini" \| "small" \| "medium" \| "large"`	`"normal"`	头像大小
bordered	`boolean`	`false`	是否展示外边框
limit	`number`	`0`	限制头像数量
ext-class	`string \| string[] \| Record<string, boolean>`	-	自定义 class
ext-style	`string \| { [x: string]: string \| number; }`	-	自定义 style
avatars	`string[]`	-	头像文件列表
gap	`number`	-	头像间距