Avatar 头像
Avatar 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| src | 图片地址 | string | ||
| mode | 裁剪模式 | string | scaleToFill | |
| name | 展位名称 | string | ||
| lazy-load | 懒加载 | boolean | false | |
| size | 图标尺寸 | number | 80 | |
| shape | 类型 | string | circle / square | circle |
Avatar-gorup 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| urls | 图片地址 | string | ||
| size | 图标尺寸 | number | 80 | |
| mode | 裁剪模式 | string | scaleToFill | |
| max | 最大数量 | number | 5 | |
| shape | 懒加载 | boolean | false | |
| showMore | 图标尺寸 | number | 80 |
示例
基本用法
html
<cl-avatar src=""></cl-avatar>头像形状
html
<cl-avatar shape="square"></cl-avatar>头像大小
html
<cl-avatar :size="70"></cl-avatar>文字头像
html
<cl-avatar :size="70">cool</cl-avatar>头像组
html
<cl-avatar-group :urls="[...]"></cl-avatar-group>
