@xme-react/avatar NPM

头像/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);
});

classnames console-polyfill es3ify-webpack-plugin es5-shim export-from-ie8 normalize.css prop-types react react-dom

1.0.1

5 years ago