Skip to content

头像组件 jb-avatar

头像

头像

头像组件支持以下功能:

  • 显示头像图片
  • 点击上传,默认是关闭的,通过upload相关属性开启
  • 点击预览,默认就是打开的

Props

名称类型默认值说明
srcstringundefined图片显示的地址
fallbackSrcstringassets/imgs/_builtin/default_avatar.png 对应的url地址图片显示失败时或未指定src时显示的图片地址
roundbooleantrue是否显示为圆形头像
widthstring | number50头像宽度
heightstring | numberundefined头像高度,如果指定了round,那么将强制height=width,该属性失效
objectFit'fill' | 'contain'| 'cover' | 'none' | 'scale-down'cover图片在容器内的的适应类型
previewbooleantrue是否支持点击预览。如果开启了上传功能,那么该功能将失效。
lazybooleantrue是否让图片进入视口再加载
uploadbooleanfalse是否开启上传功能
uploadToUploadTo.env-configdefaultUploadTo配置项值将头像上传到哪里 具体说明参考
qiniuSnstring.env-configdefaultQiniuSn配置项值七牛上传时,使用哪个配置,具体说明参考
savePathstringavatar/{date(yyMMddHH)}/{random(5)}/{ori}文件服务器的保存路径,路径支持动态生成,通过{}指定规则生成动态值,具体规则说明

示例代码

单纯显示一个头像

vue
<!-- 参考页面:src/views/_builtin/management/user/index.vue -->
<jb-avatar :src="row.avatar"></jb-avatar>
<!-- 参考页面:src/views/_builtin/management/user/index.vue -->
<jb-avatar :src="row.avatar"></jb-avatar>

开启上传功能

vue
<!-- 参考页面: src/views/_builtin/management/user/index.vue -->
<jb-avatar v-model:src="form.avatar" :upload="true"></jb-avatar>
<!-- 参考页面: src/views/_builtin/management/user/index.vue -->
<jb-avatar v-model:src="form.avatar" :upload="true"></jb-avatar>