TUI

0.3.7
Avatar 头像
提供图片的渲染多种效果,支持 SSR 友好懒加载与错误态占位。
基础用法
用于头像场景,支持占位符、形状控制与错误态占位。
示例代码
vue
<template>
  <TsAvatar />
  <TsAvatar shape="square" />
  <TsAvatar :error="true" />
  <TsAvatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e5bcpng.png" />
  <TsAvatar src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
</template>
不同大小
使用 size 控制尺寸:支持 xs / small / medium / large / xl;也支持数值 size(如 80)直接指定像素。
示例代码
vue
<template>
  <TsAvatar shape="square" size="xs" />
  <TsAvatar shape="square" size="small" />
  <TsAvatar shape="square" size="medium" />
  <TsAvatar shape="square" size="large" />
  <TsAvatar shape="square" size="xl" />
  <TsAvatar shape="square" :size="80" />
  <TsAvatar shape="square" :size="96" />
  <TsAvatar shape="square" :size="128" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
</template>
图片 Fit 效果
支持原生 cover、contain、fill
示例代码
vue
<template>
  <TsAvatar shape="square" :size="80" fit="cover" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  <TsAvatar shape="square" :size="80" fit="contain" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
  <TsAvatar shape="square" :size="80" fit="fill" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
</template>
拓展用法
自定义默认背景色与圆角。懒加载/占位、预览/删除请使用 TsImage。
示例代码
vue
<template>
  <TsAvatar shape="square" :size="80" bg="black" />
  <TsAvatar shape="square" :size="80" :borderRadius="12" src="https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg" />
</template>
属性 Props
属性名
说明
类型
可选值
默认值
版本
src
头像图片地址
string
-
-
size
头像尺寸:支持 xs/small/medium/large/xl,或数值(像素)
'xs' | 'small' | 'medium' | 'large' | 'xl' | number
xs / small / medium / large / xl / number
medium
-
shape
形状
'circle' | 'square'
circle / square
circle
-
borderRadius
圆角(数值或字符串)
string | number
-
0
-
isUpload
是否为上传状态, 用于控制样式
boolean
-
false
0.3.2 开始支持
fit
图片填充方式
'cover' | 'contain' | 'fill'
cover / contain / fill
cover
-
fallback
无 src 时显示的占位字符
string
-
-
事件 Events
事件名
说明
类型
preview
预览图片
null
delete
删除图片
null
load
图片加载结果
true / false
error
图片加载失败
native error (可选)