@dsyx/text-avatar

文字头像组件

安装

npm i @dsyx/text-avatar --save

使用

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

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

	const cardConfig = [
		{
			label: '部门',
			value: '企业技术部-PaaS-UED'
		},
		{
			label: '邮箱',
			value: 'xiaoming@qq.com'
		}
	];

	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 | 否 | - | 卡片内的头像点击 |