| commit | author | age | ||
| 9bcb19 | 1 | # AvatarList 用户头像列表 |
| I | 2 | |
| 3 | ||
| 4 | 一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。 | |
| 5 | ||
| 6 | ||
| 7 | ||
| 8 | 引用方式： | |
| 9 | ||
| 10 | ```javascript | |
| 11 | import AvatarList from '@/components/AvatarList' | |
| 12 | const AvatarListItem = AvatarList.AvatarItem | |
| 13 | ||
| 14 | export default { | |
| 15 | components: { | |
| 16 | AvatarList, | |
| 17 | AvatarListItem | |
| 18 | } | |
| 19 | } | |
| 20 | ``` | |
| 21 | ||
| 22 | ||
| 23 | ||
| 24 | ## 代码演示 [demo](https://pro.loacg.com/test/home) | |
| 25 | ||
| 26 | ```html | |
| 27 | <avatar-list size="mini"> | |
| 28 | <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" /> | |
| 29 | <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" /> | |
| 30 | <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> | |
| 31 | </avatar-list> | |
| 32 | ``` | |
| 33 | 或 | |
| 34 | ```html | |
| 35 | <avatar-list :max-length="3"> | |
| 36 | <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" /> | |
| 37 | <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" /> | |
| 38 | <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> | |
| 39 | <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> | |
| 40 | <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> | |
| 41 | <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> | |
| 42 | <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> | |
| 43 | </avatar-list> | |
| 44 | ``` | |
| 45 | ||
| 46 | ||
| 47 | ||
| 48 | ## API | |
| 49 | ||
| 50 | ### AvatarList | |
| 51 | ||
| 52 | | 参数 | 说明 | 类型 | 默认值 | | |
| 53 | | ---------------- | -------- | ---------------------------------- | --------- | | |
| 54 | | size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | | |
| 55 | | maxLength | 要显示的最大项目 | number | - | | |
| 56 | | excessItemsStyle | 多余的项目风格 | CSSProperties | - | | |
| 57 | ||
| 58 | ### AvatarList.Item | |
| 59 | ||
| 60 | | 参数 | 说明 | 类型 | 默认值 | | |
| 61 | | ---- | ------ | --------- | --- | | |
| 62 | | tips | 头像展示文案 | string | - | | |
| 63 | | src | 头像图片连接 | string | - | | |
| 64 | ||
