头像组件 jb-avatar
头像组件支持以下功能:
- 显示头像图片
- 点击上传,默认是关闭的,通过upload相关属性开启
- 点击预览,默认就是打开的
Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | string | undefined | 图片显示的地址 |
fallbackSrc | string | assets/imgs/_builtin/default_avatar.png 对应的url地址 | 图片显示失败时或未指定src时显示的图片地址 |
round | boolean | true | 是否显示为圆形头像 |
width | string | number | 50 | 头像宽度 |
height | string | number | undefined | 头像高度,如果指定了round ,那么将强制height=width,该属性失效 |
objectFit | 'fill' | 'contain'| 'cover' | 'none' | 'scale-down' | cover | 图片在容器内的的适应类型 |
preview | boolean | true | 是否支持点击预览。如果开启了上传功能,那么该功能将失效。 |
lazy | boolean | true | 是否让图片进入视口再加载 |
upload | boolean | false | 是否开启上传功能 |
uploadTo | UploadTo | .env-config 中defaultUploadTo 配置项值 | 将头像上传到哪里 具体说明参考 |
qiniuSn | string | .env-config 中defaultQiniuSn 配置项值 | 七牛上传时,使用哪个配置,具体说明参考 |
savePath | string | avatar/{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>