在前端开发中，经常会遇到需要从一批人员中选择一个或多个人的场景。使用 @beisen/ocean-person-selector-input 可以很方便地实现这种需求。
安装
使用 npm 包管理工具安装：
npm install @beisen/ocean-person-selector-input --save
使用
- 引入包
import SelectInput from "@beisen/ocean-person-selector-input"; import "@beisen/ocean-person-selector-input/dist/main.css";
- 在渲染的地方使用组件
-- -------------------- ---- ------- ------------ -- -------------- ------------------ ----------- -- - ------------------------ -------- -- -- ----------- --- ------------------- -- --- --------- --------------------------- -- ---------- ----- --------------- -- --------- ------------------- ------- ------ --------- ---- --- --展开代码
属性说明
| 属性名 | 类型 | 必须 | 默认值 | 描述 |
|---|---|---|---|---|
| onChange | (person: PersonInfo | PersonInfo[]) => void | 是 | 无 | 点击人员选择器时触发的回调函数 |
| placeholder | string | 否 | 请选择 | 输入框内的占位符 |
| className | string | 否 | 无 | 自定义 CSS 类名 |
| multiple | boolean | 否 | false | 是否可以多选 |
| defaultSelected | PersonInfo[] | null | 否 | null | 初始选中的人员列表 |
PersonInfo 类型说明
| 属性名 | 类型 | 描述 |
|---|---|---|
| userId | string | 区分人员的唯一标识符，如工号、id 等等 |
| userName | string | 人员姓名 |
| avatar | string | 人员头像的 URL 地址，如果有的话 |
| extData | any | 其它扩展信息，可根据业务需求自行添加属性 |
| key | string | React 渲染列表时必填的 Key 值 |
示例
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ----------- ---- -------------------------------------- ------ ---------------------------------------------------- ------ ------- -------- ----- - ----- ---------- ------------ - --------------- ------ - ---- ---------------- ------------ ------------------ -- -------------------- ------------------- --------------------------- ---------------- ------------------ - ------- ------ --------- ----- ------- ------------------------ -- -- -- ------------------------------------------ ------ -- -展开代码
指导意义
@beisen/ocean-person-selector-input 是一个基于 React 的人员选择器组件，具有使用简单、扩展性强的特点。通过使用此组件，我们可以提高开发效率，同时减少人力资源成本，适用于需要从多个人员中选择一个或多个人的场景。
总结
使用 @beisen/ocean-person-selector-input 可以快速实现人员选择器的需求，同时具有脱离业务场景的通用性和扩展性，轻松适配各种场景和复杂业务。希望此文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabf5b5cbfe1ea06108e8
