Skip to content
On this page

Avatar 头像

用户的头像展示

基本使用

使用 src 属性设置图片的路径

round 属性可以配置圆角头像

开启

使用本地图片

如需要使用本地图片,需要使用 new URL(url, import.meta.url) 手动导入图片资源使用:

开启

适应容器的方式

fit 属性可以配置头像不同适应容器的方式,详见原生 object-fit 属性

fill
contain
cover
none
scale-down
开启

不同大小

size 属性可以配置不同大小的头像,也可以传入指定的数字,会自动转换为 px

开启

图标头像

icon 属性可以配置带有 icon 的图标头像

background 属性可以配置背景色,font-color 属性可以自定义图标颜色

font-size可以配置图标大小,后面必须要加入单位

开启

懒加载

lazy 属性可以设置图片懒加载,详情可参考 DevToolsNetwork

开启

加载失败

默认加载失败会显示 加载失败,当然你也可以使用 alt 属性自定义加载失败的提示文字

或者使用 error 插槽展示

开启

Attributes

参数说明类型可选值默认值
src图片路径string————
err-src加载失败时要显示的地址string————
alt原生 alt 属性string——加载失败
round是否为圆角boolean——false
lazy是否懒加载头像boolean——false
fit如何适应容器,原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
background背景色string————
icon图标头像FightingIcon————
font-size字体大小string————
font-color字体的颜色string————
text文字头像string————
root-margin触发懒加载的距离string / number——100px
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————

Slots

插槽名称说明说明
error自定义加载失败提示
icon自定义 icon 头像

Interface

组件导出以下类型定义:

ts
import type { AvatarInstance, AvatarProps } from 'fighting-design'

样式变量

组件提供了下列 CSS 变量,可用于自定义样式

名称描述
--avatar-size尺寸

Contributors