Tantalum UI

Appearance

Return to top
On this page

Avatar/AvatarGroup 头像

vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="默认">
      <ta-avatar />
    </ta-cell>
    <ta-cell label="图片（src=xxx）">
      <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/5.png" />
    </ta-cell>
    <ta-cell label="文字（Slot default）">
      <ta-avatar>曹</ta-avatar>
    </ta-cell>
  </ta-group>
  <ta-group title="色彩（color）">
    <div class="exp-avatar-custom-list">
      <ta-avatar color="#ff4d4f">DR</ta-avatar>
      <ta-avatar color="#ff7a45">V</ta-avatar>
      <ta-avatar color="#fa8c16">SO</ta-avatar>
      <ta-avatar color="#faad14">CG</ta-avatar>
      <ta-avatar color="#fadb14">SY</ta-avatar>
      <ta-avatar color="#597ef7">GB</ta-avatar>
      <ta-avatar color="#1890ff">DB</ta-avatar>
      <ta-avatar color="#36cfc9">C</ta-avatar>
      <ta-avatar color="#52c41a">PG</ta-avatar>
      <ta-avatar color="#a0d911">L</ta-avatar>
      <ta-avatar color="#9254de">GP</ta-avatar>
      <ta-avatar color="#f759ab">M</ta-avatar>
    </div>
  </ta-group>
  <ta-group title="形状（shape）">
    <ta-cell label="circle">
      <ta-avatar shape="circle" />
    </ta-cell>
    <ta-cell label="square">
      <ta-avatar shape="square" />
    </ta-cell>
  </ta-group>
  <ta-group title="尺寸（size）">
    <div class="exp-avatar-custom-list">
      <ta-avatar :size="24">24</ta-avatar>
      <ta-avatar size="small">SM</ta-avatar>
      <ta-avatar size="middle">MD</ta-avatar>
      <ta-avatar size="large">LG</ta-avatar>
    </div>
  </ta-group>
  <ta-group title="角标">
    <ta-cell label="gender">
      <div class="exp-avatar-list">
        <ta-avatar shape="square" gender="man" src="https://cdn.fox2.cn/vfox/avatar/1.png" />
        <ta-avatar shape="square" gender="woman" src="https://cdn.fox2.cn/vfox/avatar/2.png" />
        <ta-avatar shape="circle" gender="man" src="https://cdn.fox2.cn/vfox/avatar/3.png" />
        <ta-avatar shape="circle" gender="woman" src="https://cdn.fox2.cn/vfox/avatar/4.png" />
      </div>
    </ta-cell>
    <ta-cell label="badge">
      <div class="exp-avatar-list">
        <ta-avatar shape="square" badge="99" />
        <ta-avatar shape="square" :badge="{ content: 1, dot: true }" />
      </div>
    </ta-cell>
  </ta-group>
  <ta-group title="头像组">
    <ta-cell label="size=small">
      <ta-avatar-group size="small">
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/5.png" />
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/6.png" />
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/7.png" />
      </ta-avatar-group>
    </ta-cell>
    <ta-cell label="totalCount=123456">
      <ta-avatar-group size="small" :totalCount="123456" countColor="#6667AB">
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/1.png" />
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/2.png" />
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/3.png" />
        <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/4.png" />
      </ta-avatar-group>
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpAvatar'
})
</script>

Import

js
import { TaAvatar, TaAvatarGroup } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { BadgeOption, AvatarShape, AvatarSize } from 'tantalum-ui-mobile'

Avatar

Avatar Props

属性类型默认值必填说明
srcstring否图片连接，显示自定义图片
sizeAvatarSize'middle'否头像尺寸，处除了预设值，还支持传入 number
shapeAvatarShape'circle'否头像形状
badgeBadgeOption否徽标，使用 Badge 组件
genderstring否显示男女角标，优先级高于 badge
colorstring否自定义色彩，支持 hex rgb hsl 等写法，详细效果查看

AvatarSize 的合法值

值说明
large大尺寸，宽高 64px，文字 32px，图标 43px
middle默认值，中尺寸，宽高 48px，文字 24px，图标 32px
small小尺寸，宽高 36px，文字 18px，图标 21px
数值number 类型具体像素

AvatarShape 的合法值

值说明
circle圆形头像
square圆角方形头像

BadgeOption

ts
type BadgeOption =
  | number
  | string
  | Partial<{
      color: string
      content: string | number
      offset: number[]
      animated: boolean
      dot: boolean
      maxCount: number
      showZero: boolean
    }>

参数主要是基于 Badge 组件的 props，如果传入是 number 或者 string 则设置直接设置 content 属性。

Avatar Slots

children

vue
<ta-avatar>曹</ta-avatar>

AvatarGroup

AvatarGroup Props

属性类型默认值必填说明
sizeAvatarSize'middle'否组内头像尺寸，处除了预设值，还支持传入 number
total-countnumber否尾部显示头像数，如果数值过高，会对数值简化处理，如 1.1w
count-colorstring否头像数模块的自定义色彩，支持 hex rgb hsl 等写法，详细效果查看

AvatarGroup Slots

children

注：其中只可放置 Avatar 组件，否则会导致未定义的行为。

vue
<ta-avatar-group>
  <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/5.png" />
  <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/6.png" />
  <ta-avatar src="https://cdn.fox2.cn/vfox/avatar/7.png" />
</ta-avatar-group>