头像组件 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>