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 |