Situation-Awareness-Platform-Frontend/src/components/MemberAvatarList

MemberAvatarList组件

说明

• 通用的用户头像列表组件，demo如下

// 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