text-avatar-react 文字头像组件

安装

npm i @tntx/text-avatar-react --save

使用

import React from 'react';
import { message } from 'antd';
import TextAvatar from '@tntx/text-avatar-react';

export default props => {
  const user = {
    id: 10,
	account: 'xiaoming',
	empStatus: 1,
	nickname: '王小明'	 
  };

  const cardConfig = [
    {
	  label: '部门',
	  value: '企业技术部-PaaS-UED'
	},
	{
	  label: '邮箱',
	  value: '[email protected]'
	}
  ];

  return (
	<TextAvatar
	  {...user}
	  cardConfig={cardConfig}
	  onClick={() => {
	    message.info('跳转链接');
	  }}
	/>
  );
};

API

组件API

|参数 |数据类型 |是否必填 |默认值 |备注 | | ---- | ---- | ---- | ---- | ---- | | nickname | String | 是 | - | 用户昵称 | | account | String | 是 | - | 用户账号，用来判断使用颜色 | | empStatus | number | 否 | 1 | 用户状态，1是正常状态，2则为灰色 | | showPopover | boolean | 否 | true | 是否显示popover浮层 | | size | number | 否 | 32 | 头像大小（宽高） | | linearGradient | boolean | 否 | false | 是否渐变 | | randomColor | boolean | 否 | true | 是否随机颜色，如果不随机，则为固定蓝色 | | onClick | function | 否 | - | 卡片内的头像点击 | | theme | String | 否 | default | 卡片内的主题，default、plant | | sameAsChildren | boolean | 否 | true | 卡片内的头像是否和children一样 |

浮层相关API

|参数 |数据类型 |是否必填 |默认值 |备注 | | ---- | ---- | ---- | ---- | ---- | | trigger | String | 否 | hover | 浮层详情显示方式，同Popover | | placement | String | 否 | rightTop | 浮层详情显示位置，同Popover | | cardConfig | Array | 是 | [] | 卡片内的详情配置 | | onClick | function | 否 | - | 卡片内的头像点击 |