at-users-avatar

简介

多人头像显示，当人数超过四人时，显示前三个人的头像，后面人员的均以...显示，当鼠标hover的时候显示所有人员信息。

使用示例

import UsersAvatar from '@txdfe/at-users-avatar';
class Demo extends React.Component {
  render() {
    const dataSource = [
      {
        id: 'xxxxxx', // 用户的ID
        nickname: '小小', // 用户的花名
        name: '吴彦祖', // 用户的姓名
        avatar_url: 'https://work.alibaba-inc.com/photo/xxxxxx.jpg', // 用户的头像
      }
    ];

    return (
      <UsersAvatar dataSource={dataSource} />
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API

| 参数 | 类型 | 可选值 | 默认值 | 是否必填 | 说明 | | :--- | :--- | :--- | :--- | :--- | :--- | | dataSource | Array | 无 | 无 | 是 | 传入的数据源，可以动态的渲染子项 | | borderColor | String | 无 | #fff | 否 | 头像边框颜色 |

dataSource

	[
    {
      id: 'xxxxxx'; // 用户的ID
      nickname: '小小'; // 用户的花名
      name: '吴彦祖'; // 用户的姓名
      avatar_url: 'https://work.alibaba-inc.com/photo/xxxxxx.jpg'; // 用户的头像
    }
  ]