@beisen-phoenix/mobile-person-select v2.1.5
移动端选人组件
导出说明
组件导出 BizPersonSelector 和 { PersonSelector }
- BizPersonSelector 默认导出,带能用的交互和数据处理逻辑,需要使用选人组件的标准接口(或者返回标准数据格式的接口)
- PersonSelector 纯组件,不带任何内部逻辑和交互,需要做简单的二次封装,BizPersonSelector 就是基于这个封装的
普通业务可以使用BizPersonSelector,如果交互不一样,可以基于PersonSelector进行二次封装,不满足需求,可以找组件团队提需求
参数说明
BizPersonSelector
export interface IBizPersonSelectorProps {
visible?: boolean; // 控制组件的显示隐藏
contactUrl?: string; // 常用联系人接口地址,不传侧不加载常用联系人
searchUrl?: string; // 搜索人的接口地址,必须要传,不传不能搜人
value?: IPerson[]; // 选中的人,单选是长度为最大为1的数组,多选测长度不固定
onChange?: (values: IPerson[]) => void; //受控组件的onChange, 选好人并确定的回调,可以在这里添加业务逻辑,比如不能选自己
type?: TSelectorType; // multi | single 控制是多选还是单选
onCancel?: () => void; // 取消,点击取消的回调
lang?: TLang; // 多语言配置 {cancel, confirm, title}三个地方的值可以通过这个来传入,内置默认值
blankItem: IBlankItem;
blackList:number[]// 黑名单 显示时需要过滤的人员列表
showClear?: boolean //当选人为单选时,可以用此参数控制是否显示右上角清空按钮
}
PersonSelector
export interface IPersonSelectorProps {
type?: TSelectorType; // multi | single 控制是多选还是单选
value?: IPerson[]; // 选中的人,单选是长度为最大为1的数组,多选测长度不固定
data?: IPerson[]; // 选人组件展示的数据列表
keyword?: string; // 搜索的关键字
onChange?: (value: IPerson[]) => void; //受控组件的onChange, 选好人并确定的回调,可以在这里添加业务逻辑,比如不能选自己
onSearch?: (keyword: string) => void; // 搜索回调,keyword受控,代表搜索框里的值
onCancel?: () => void; // 点击取消按钮的回调函数
lang?: TLang; // 多语言配置 {cancel, confirm, title}三个地方的值可以通过这个来传入,内置默认值
showClear?:boolean; //当选人为单选时,可以用此参数控制是否显示右上角清空按钮
}
组件接受的数据格式说明
人员列表
人员列表接受的是 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; //列表上显示的名字,取不到会取name字段
color?: string; // 头像上显示的背景色
}
选人组件设计/开发过程
- 接口外围,做为基础组件只接受数据,和行为相关的参数,尽可能成为一个纯组件。无任何业务相关逻辑
- 想内置接口的话,再基于基础组件做二次封装,这样基础组件的可复用性会更强
- 先定义组件渲染需要的数据结构,
- 实现基于设计数据的渲染
- 补充交互
一、定义最基础的数据结构
interface IPerson {
id: string | number;
name: string;
avatar: string;
email: string;
}
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago