@txdfe/at-text-avatar

at-text-avatar

---

简介

根据文字生成头像，类似钉钉、gitlab首页效果

使用示例

萨波

import TextAvatar from '@txdfe/at-text-avatar';

class Demo extends React.Component {
  render() {
    return (
      <TextAvatar
        image={user.avatar_url}
        text={user.nickname || user.name}
      />
    );
  }
}

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

API

参数	类型	可选值	默认值	是否必填	说明
text	String	无	无	是	用作头像的文字，默认截取第一个字符作为头像（可通过sliceFrom和sliceLength调整）
image	String	无	无	否	图片地址。当传入此参数时，组件将优先使用此参数将头像渲染成图片，为空时才使用text参数渲染成文字
size	String	xl, large, medium, small, xs	medium	否	有5种可选尺寸，大小依次为：24px、28px、36px、48px，64px 默认尺寸为medium
radius	String	无	100%	否	显示头像的圆角度数，默认值为100%
cover	Boolean	true,false	false	否	头像圆角为4px，fontSize为20px，fontWeight为500
sliceFrom	String	head, end	head	否	截取文字的方向，默认从词首开始截取，如『萨波』将截取『萨』
sliceLength	Number	无	1	否	截取文字的长度，默认截取1个字符。不建议截取超过2个字符
href	String	无	无	否	传这个参数时，头像将变成一个a标签，点击跳转的链接为传入的值
isTargetBlank	Bool	true, false	true	否	指定a标签是否新标签页打开（需要与href参数一起使用）
className	String	无	无	否	添加到组件上的className
needAddedText	Boolean	true,false	false	否	是否需要在头像后面展示 text