inleft
2022-03-02 34223b096cf6ad9d92c3702bb9529e764f523b11
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