@txdfe/at-users-avatar v1.0.0

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

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