头像/Avatar

效果

使用

Avatar

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | src | String | 头像的url，优先级比uid高，如果传了src，doNotUseDefault将始终未true，所以请确定传入的src一定能被访问到 | | uid | Number | 用户id | | name | String | 用户名称 | | cls | String | 自定义样式名称| | iconfont | String | iconfont图标，优先级比src高| | doNotUseDefault | Boolean | 当确定图片一定可以加载到时，可以不生成根据name后2位产生的DOM节点 | | size | Number | 头像的尺寸，内部会自动计算字体大小与行高，不需要通过cls设定 |

GroupAvatar

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | members | Array[{userId: 123, userName:'xxx'}] | 群成员列表 | | size | Number | 头像的尺寸，内部会自动计算字体大小与行高，不需要通过cls设定 |

import React from 'react';
import ReactDOM from 'react-dom';
import Avatar from '@xm/Avatar';

const {GroupAvatar} = Avatar

window.addEventListener('DOMContentLoaded', () => {
	ReactDOM.render((<div>
		<div>能加载到头像<Avatar uid={1} name="发布小哥" /><Avatar uid={10001} name="发布大哥" /></div>
		<div>不能加载到头像，使用name的后2个字<Avatar uid={123} name="随便啦" /></div>
		<div>不能显示头像，也不使用name<Avatar uid={123} name="随便啦" doNotUseDefault /></div>
		<div>再次使用不能加载到头像，将不会再去请求此头像<Avatar uid={123} name="随便啦" size={80} /></div>
		<div>
		    直接使用url
            <Avatar src="https://app-icon-qn.jituancaiyun.com/-1496388431966.jpg" uid={123} name="随便啦" />
        </div>
        <div>
          <GroupAvatar members={[{userId: '123', userName: 'xxxx'}]} size={30} />
        </div>
        <div>
          <GroupAvatar members={[{userId: '123', userName: 'xxxx'}, {userId: '124', userName: 'xxxx'}]} size={32} />
        </div>
        <div>
          <GroupAvatar members={[{userId: '123', userName: 'xxxx'}, {userId: '124', userName: 'xxxx'}, {userId: '10001', userName: 'xxxx'}]} size={60} />
        </div>
        <div>
          <GroupAvatar members={[{userId: '1', userName: 'xxxx'}, {userId: '123', userName: 'xxxx'}, {userId: '124', userName: 'xxxx'}, {userId: '10001', userName: 'xxxx'}]} size={80} />
        </div>
	</div>), document.body);
});