@txdfe/at-users-avatar

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'; // 用户的头像
    }
  ]