介绍
在前端开发中，我们常常需要在页面中展示人员选择器，这时使用人员选择器库可以方便地实现这一功能。而 @beisen-phoenix/person-selector 是一个开源的人员选择器库，可以帮助开发者快速地实现人员选择功能。本篇文章将向大家介绍如何使用 @beisen-phoenix/person-selector。
安装
使用 npm 安装 @beisen-phoenix/person-selector：
npm install @beisen-phoenix/person-selector --save
引入
在需要使用人员选择器的页面中，引入 @beisen-phoenix/person-selector：
import PersonSelector from '@beisen-phoenix/person-selector'
使用
初始化
使用 PersonSelector 构造函数初始化人员选择器：
-- -------------------- ---- -------
----- -------------- - --- ----------------
---------- ------------- -- ---------
--------- ----- -- ------
----- --- -- -----
--------- --- -- --------
--------- ---------- -- - -- ---------------
---------------------
-
--方法
PersonSelector 提供了以下方法：
setData
设置渲染的数据：
personSelector.setData(data)
setSelected
设置已选择的人员：
personSelector.setSelected(selected)
clear
清空已选择的人员：
personSelector.clear()
例子
下面是一个使用 @beisen-phoenix/person-selector 实现人员选择的例子：
-- -------------------- ---- -------
------ -------------- ---- ---------------------------------
----- ---- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- -
-
----- -------- - -
- --- -- ----- ---- --
- --- -- ----- ---- -
-
----- -------------- - --- ----------------
---------- -------------
--------- -----
----- -----
--------- ---------
--------- ---------- -- -
---------------------
-
--
----- ------------- - ----------------------------------------
--------------------------------------- -- -- -
----- ------- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- -
-
-------------------------------
--
----- ----------------- - --------------------------------------------
------------------------------------------- -- -- -
----- ----------- - -
- --- -- ----- ---- --
- --- -- ----- ---- -
-
---------------------------------------
--
----- ----------- - --------------------------------------
------------------------------------- -- -- -
----------------------
--总结
使用 @beisen-phoenix/person-selector 可以方便地实现人员选择器功能。需要注意的是，@beisen-phoenix/person-selector 支持 TypeScript，可以帮助我们更好地验证数据类型，提高代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/134814