简介
ng2-select-custom 是一个基于 Angular 框架构建的自定义选择器组件，能够高度定制样式，并且支持过滤、分组等功能。在 Angular 开发中，经常需要使用到自定义选择器组件来进行数据选择操作，ng2-select-custom 可以有效的提高开发效率，同时提供了灵活的 API，满足高度定制化的需求。
安装
使用 ng2-select-custom 需要先安装依赖包，可以通过 npm 进行安装。
npm install ng2-select-custom --save
使用
在需要使用 ng2-select-custom 的组件中引用 SelectCustomModule，然后配置 SelectCustomComponent 即可使用。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- ----------------------------------------
------------
--------- -----------
--------- -
------------------
-------------------------
----------------------
-----------------------
-------------------------------
--------------------------------------------
----------------------------
--------------------
--
--
------ ----- ------------- ---------- ------ -
----------- ------------- - -
- --- -- ----- --------- --
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- ------------ --
--
-------------- ------------- - ---
---------- --
---------------------------- -------------- -
------------------ - ------
-
--------------- ------- -
-- ------- ----------
-
-参数说明
| 参数名 | 类型 | 说明 |
|---|---|---|
itemSource |
SelectModel[] | 数据源 |
isMultiSelect |
boolean | 是否支持多选 |
isSelectedAll |
boolean | 是否全选 |
selectedItems |
SelectModel[] | 已选择项 |
itemChange |
EventEmitter | 选择项发生变化时的回调函数 |
search |
EventEmitter | 搜索时的回调函数 |
方法说明
| 方法名 | 说明 |
|---|---|
open() |
打开选择器组件 |
close() |
关闭选择器组件 |
样式定制
ng2-select-custom 提供了大量的样式定制接口，开发者可以自由的修改组件的样式。
主题颜色
// _custom-select.scss $primaryColor: $color-blue !default; // 主题颜色
选项样式
-- -------------------- ---- ------- -- ---------- ---------------- ---- --------- -- ------- -- ------ ------------------ --- --------- -- ------ --------------- ------------ - ---------- - - --------- -- ------- ----------------- ---- --------- -- ------- ---------- ----- --------- -- ---- ----------- ---- --------- -- ---- -- ------ ---------------------- ----------- --------- -- -------- ------------------------ --- --- --------- -- ---------
下拉框样式
-- -------------------- ---- ------- -- ------------------- --------------- ---- --------- -- --- ------------------------ ---- --------- -- ----- ----------------------- --- --------- -- -------- ------------------ ------- --------- -- ------ -------------- - -- -- -- ---- ----- ----- ------ ------- -- -- --- - --------- -- --- -- ----- -------------- ----- --------- -- ----- --------------------- ---- --------- -- ------- ----------- ----- --------- -- ---- ------------ ---- --------- -- ---- -- ---------- ----------- ---- --------- -- ---- ------------ --- --------- -- ---- ------------- ---- --------- -- ----
总结
通过学习该 npm 包的使用方法和样式定制，可以快速的构建一个高度定制化的选择器组件，并且在 Angular 开发中，该组件能够提供高效的选择操作以及多种功能支持。了解如何通过样式来进行组件的定制，能够满足各种不同的视觉需求，为开发者提供更多的自由度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a181e8991b448d5ef2