移动端选人组件
导出说明
组件导出 BizPersonSelector 和 { PersonSelector }
- BizPersonSelector 默认导出,带能用的交互和数据处理逻辑,需要使用选人组件的标准接口(或者返回标准数据格式的接口)
- PersonSelector 纯组件,不带任何内部逻辑和交互,需要做简单的二次封装,BizPersonSelector 就是基于这个封装的
普通业务可以使用BizPersonSelector,如果交互不一样,可以基于PersonSelector进行二次封装,不满足需求,可以找组件团队提需求
参数说明
BizPersonSelector
export interface IBizPersonSelectorProps {
visible?: boolean;
contactUrl?: string;
searchUrl?: string;
value?: IPerson[];
onChange?: (values: IPerson[]) => void;
type?: TSelectorType;
onCancel?: () => void;
lang?: TLang;
blankItem: IBlankItem;
}
PersonSelector
export interface IPersonSelectorProps {
type?: TSelectorType;
value?: IPerson[];
data?: IPerson[];
keyword?: string;
onChange?: (value: IPerson[]) => void;
onSearch?: (keyword: string) => void;
onCancel?: () => void;
lang?: TLang;
}
组件接受的数据格式说明
人员列表
人员列表接受的是 IPerson[] 的数组(PersonSelector的data属性),IPerson的定义如下
export interface IPerson {
id: string | number;
name: string;
avatar?: string;
email: string;
hasAvatar: boolean;
color?: string;
}
空值
根据交互设计,组件需要提供可选的空值的选项,方便明确标识选择了空值。对于组件来说,空值属于业务需求下的场景,用来表示空值的id也未必一致,所以空值的设置是类似IPersion的 IBlankItem的数据项,并通过一个单独的参数来控制,传递这个参数就显示空值,不传递侧不显示。
IBlankItem的定义如下, 具体使用示例请看examples
export interface IBlankItem {
id: string | number;
name: string;
fullName?: string;
color?: string;
}
选人组件设计/开发过程
- 接口外围,做为基础组件只接受数据,和行为相关的参数,尽可能成为一个纯组件。无任何业务相关逻辑
- 想内置接口的话,再基于基础组件做二次封装,这样基础组件的可复用性会更强
- 先定义组件渲染需要的数据结构,
- 实现基于设计数据的渲染
- 补充交互
一、定义最基础的数据结构
interface IPerson {
id: string | number;
name: string;
avatar: string;
email: string;
}
万一接口接受到的数据格式不一样怎么办,后面再说
对于选人组件来说,选择的,和展示人员,是个列表,列表应该用数组来表示。所以我们得到了第一个组件的属性 data 是 Person 的数组
interface IPersonSelectorProps {
data: IPerson[];
}
基于这个数据,我们先把这个列表渲染出来