npm 包 ng2-multiselect 使用教程

阅读时长 6 分钟读完

介绍

ng2-multiselect 是一个 Angular2+ 的多选下拉框组件库,具有高度的可配置性和灵活性。 本文将介绍如何使用 ng2-multiselect 包,其中包括如何安装、配置以及代码示例。

安装

使用 ng2-multiselect 需要安装以下前提包:

  • Angular ^2.0.0
  • rxjs ^5.0.0

然后,可以通过 npm 安装 ng2-multiselect:

配置

ng2-multiselect 可以通过 @Input 和 @Output 两个装饰器来配置。以下是 ng2-multiselect 的配置项:

Input

  • data: { id:number, name:string }[] - 显示的选项列表
  • settings: MultiselectSettings - 多选框的设置
  • texts: MultiselectTexts - 多选框的文字设置
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- --------------------- ----------------- - ---- ------------------

------------
  --------- ------
  --------- -
    ------------------- -------------------------
  -
--
------ ----- ------------ -
  -- ---- -- -- --------- -- -----------
  ---------- ---------------------

  -- ----------- -------- ------
  ----------- -------------------- - -
    ------------- -----
    ------------- --------------
    -------------- ---- ----------- ---------------
    --------------- --
    -------------------- -----
    ------------- -----
    --------------- -----
    ----------- ------
  --

  -- ----------- ---- -------- ------
  -------- ----------------- - -
    --------- ------- -----
    ----------- --------- -----
    -------- ----- ----------
    -------------- ------ ----------
    ------------------ ------------
    ------------- ---------
  --

  ------------- - -
-
展开代码

Output

  • onAdded: EventEmitter<any> - 添加选项时的输出
  • onRemoved: EventEmitter<any> - 删除选项时的输出
  • onOpened: EventEmitter<any> - 多选框打开时的输出
  • onClosed: EventEmitter<any> - 多选框关闭时的输出
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ -
  -------------------
  ---------------------
  ------------------
  ------------------------
  -----------------------
- ---- ------------------

------------
  --------- ------
  --------- -
    ------------------- --- -----------------------------------------------------
  -
--
------ ----- ------------ -
  
  --------- - ------ -- -
    ------------------
  --

  ------------- - -
-
展开代码

代码示例

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ -
  -------------------
  ---------------------
  ------------------
  ------------------------
  -----------------------
- ---- ------------------

------------
  --------- ------
  --------- -
    ------------------- ------------------ ----------------------- ----------------- -----------------------------------------------------
  -
--
------ ----- ------------ -
  
  ---------- -------------------- - -
    - --- -- ----- ------- -- --
    - --- -- ----- ------- -- --
  --
  
  ----------- -------------------- - -
    ------------- -----
    ------------- --------------
    -------------- ---- ----------- ---------------
    --------------- --
    -------------------- -----
    ------------- -----
    --------------- -----
    ----------- ------
  --

  -------- ----------------- - -
    --------- ------- -----
    ----------- --------- -----
    -------- ----- ----------
    -------------- ------ ----------
    ------------------ ------------
    ------------- ---------
  --

  --------- - ------ -- -
    ------------------
  --

  ------------- - -
-
展开代码

结论

ng2-multiselect 是一个非常灵活且易于使用的 Angular2+ 组件,它提供了高度的可配置性,可以轻松地创建一个美观、功能强大的多选下拉框组件。本文介绍了 ng2-multiselect 的安装以及配置方法,同时提供了一个代码示例,希望对您有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055aac81e8991b448d83c8

纠错
反馈

纠错反馈