69 lines
2.9 KiB
Markdown
69 lines
2.9 KiB
Markdown
|
# MemberAvatarList组件
|
|||
|
|
|
|||
|
|
### 说明
|
|||
|
|
- 通用的用户头像列表组件，demo如下
|
|||
|
|
|
|||
|
|
``` js
|
|||
|
|
// template
|
|||
|
|
<member-avatar-list :data="userAvatarList2" hideBottomMore more-icon='icon-op-list' type-icon="icon-homepage" :count="127" :isRound="true" :showHover="false" title="成员" :to-more="`/home`" />
|
|||
|
|
// script
|
|||
|
|
const userAvatarList2: Array<userAvatarListRow> = [
|
|||
|
|
{
|
|||
|
|
avatar: 'https://avatars.githubusercontent.com/u/40119767?v=4',
|
|||
|
|
name: '曾恒瑶'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatar: 'https://avatars.githubusercontent.com/u/40119767?v=4',
|
|||
|
|
name: '曾恒瑶'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatar: 'https://avatars.githubusercontent.com/u/40119767?v=4',
|
|||
|
|
name: '曾恒瑶'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
```
|
|||
|
|
### Props
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
| -------------- | -------------------- | ------- | ----------------- | ------ |
|
|||
|
|
| data | 头像列表 | array | 见下表 | [] |
|
|||
|
|
| title | 标题 | string | — | — |
|
|||
|
|
| toMore | 查看全部路由path | string | — | — |
|
|||
|
|
| isRound | 是否圆形 | boolean | false则为圆角矩形 | true |
|
|||
|
|
| showHover | 展示hover | boolean | — | false |
|
|||
|
|
| hideNum | 隐藏标签数字 | boolean | — | false |
|
|||
|
|
| hideBottomMore | 隐藏底部查看全部按钮 | boolean | — | false |
|
|||
|
|
| hideRightMore | 隐藏右上角全部按钮 | boolean | — | false |
|
|||
|
|
| type-icon | 标题前的类型图标 | string | — | — |
|
|||
|
|
| more-icon | 更多按钮图标 | string | — | — |
|
|||
|
|
| count | 成员数 | number | | 0 |
|
|||
|
|
|
|||
|
|
### Props(data)
|
|||
|
|
|
|||
|
|
注意：有头像src优先会显示，没有src则显示name，若设置了customText则优先显示自定义的文案
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
|----------------|-------------------------|-------------------------------|-----------|-------|
|
|||
|
|
| avatar | 头像src | string | — | — |
|
|||
|
|
| name | 用户名 | string | — | — |
|
|||
|
|
| customText | 自定义文案 | string | — | — |
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Emits
|
|||
|
|
|
|||
|
|
注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
|
|||
|
|
|
|||
|
|
| 方法 | 说明 | 返回值 |
|
|||
|
|
|-----------|--------|-----------------------|
|
|||
|
|
| handleMore | 点击更多触发 | |
|
|||
|
|
|
|||
|
|
### Slots
|
|||
|
|
|
|||
|
|
| 名称 | 说明 |
|
|||
|
|
|--------------------|-------------------------------|
|
|||
|
|
| title | |
|
|||
|
|
| content | |
|
|||
|
|
| more | |
|
|||
|
|
| bottomMore | |
|
|||
|
|
|