什么是 dwp-angular2-multiselect-dropdown
dwp-angular2-multiselect-dropdown 是一款基于 Angular2 的下拉多选框组件，提供了丰富的定制化选项，可用于创建业务场景中需要多选框的表单。
主要特性：
- 可自定义选项样式
- 可自定义下拉框样式
- 支持数据过滤和搜索
- 支持单选模式、多选模式和搜索模式
如何安装和使用 dwp-angular2-multiselect-dropdown
安装
在使用之前，需要安装 dwp-angular2-multiselect-dropdown 包，使用 npm 命令安装即可：
npm install --save dwp-angular2-multiselect-dropdown
引用
在需要使用 dwp-angular2-multiselect-dropdown 的 Angular2 组件中引入 dwp-angular2-multiselect-dropdown 模块：
import { DwpAngular2MultiselectDropdownModule } from 'dwp-angular2-multiselect-dropdown';并将 DwpAngular2MultiselectDropdownModule 添加到所属模块的 imports 中：
-- -------------------- ---- -------
-----------
-------- -
------------------------------------
--
------------- -
------------
--
---------- - ------------ -
--
------ ----- --------- - -选项说明
在组件内，定义供下拉多选框使用的数据源，每项数据需包含 value 和 label 两个属性，如下所示：
-- -------------------- ---- -------
------------ - -
- ------ ------ ------ ---- --
- ------ --------- ------ ----- --
- ------ --------- ------ ---- --
- ------ -------- ------ ---- --
- ------ ------------ ------ ------ --
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ ---------- ------ ---- --
- ------ -------- ------ ----- --
- ------ -------- ------ ----- -
--组件使用
在需要使用下拉多选框的组件内定义下列变量：
selectedItems: string[]; dropdownSettings: IDropdownSettings;
其中，selectedItems 是一个数组，存储用户选择的数据，dropdownSettings 是一个对象，可以自定义选项和下拉框的样式，示例如下：
-- -------------------- ---- -------
--------------------- - -
---------------- ------
-------- --------
---------- --------
-------------- -----
---------------- -------
--------------- --
------------------ ----
--这里使用了 dwp-angular2-multiselect-dropdown 的部分配置选项：
- singleSelection：是否单选，false 为多选
- idField：选项数据的 value 键名
- textField：选项数据的 label 键名
- selectAllText：全选文本
- unSelectAllText：取消全选文本
- itemsShowLimit：在下拉框中显示的项目数
- allowSearchFilter：是否允许搜索
最后在与下拉多选框相关的 HTML 片段中添加组件代码即可使用：
<dwp-angular2-multiselect-dropdown
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings">
</dwp-angular2-multiselect-dropdown>示例代码
完整的演示代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------ - -
- ------ ------ ------ ---- --
- ------ --------- ------ ----- --
- ------ --------- ------ ---- --
- ------ -------- ------ ---- --
- ------ ------------ ------ ------ --
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ ---------- ------ ---- --
- ------ -------- ------ ----- --
- ------ -------- ------ ----- -
--
-------------- ---------
----------------- ------------------
------------- -
------------------ - ---
--------------------- - -
---------------- ------
-------- --------
---------- --------
-------------- -----
---------------- -------
--------------- --
------------------ ----
--
-
-<dwp-angular2-multiselect-dropdown [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"> </dwp-angular2-multiselect-dropdown>
以上代码可在 Angular2 项目中使用，具有指导意义和学习参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d66