介绍
duallist-box-empretec 是一个帮助开发者快速实现双向选择器的 npm 包。双向选择器通常用于选择某一元素或者一组元素来进行处理，比如回收站中的文件，或者多选框。这个 npm 包提供了一个易于使用的界面，用户可以拖动选项到各自的列表中。
安装
先安装 npm，再在终端中运行以下命令：
npm install duallist-box-empretec --save
开始使用
导入 duallist-box-empretec
使用 require 导入 duallist-box-empretec，示例代码如下：
const DuelingListBox = require('duallist-box-empretec');创建容器
创建一个容器用于放置双向选择器，示例代码如下：
<div id="myContainer"></div>
初始化选项
准备要选择的选项。把要选择的选项放在一个数组里面，每个选项表示为一个对象，示例代码如下：
const options = [
{ value: 1, text: '选项 1'},
{ value: 2, text: '选项 2'},
{ value: 3, text: '选项 3'},
{ value: 4, text: '选项 4'},
{ value: 5, text: '选项 5'}
];初始化双向选择器
在容器中初始化双向选择器，示例代码如下：
-- -------------------- ---- -------
---- -----------------------
--------
----- ------- - -
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ---
--
----- -------------- - ---------------------------------
----- ----- - --- ------------------------------ -------- ----
---------初始化选项参数
在初始化双向选择器时，可以传递一些选项参数，示例代码如下：
-- -------------------- ---- -------
---- -----------------------
--------
----- ------- - -
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ---
--
----- -------------- - ---------------------------------
----- ----- - --- ------------------------------ -------- -
----------- ----- -- --------
------- ----- -- --------
------------------ ---- -- ------------
---
---------实现示例
下面是一个完整的示例代码，可以更好的理解如何在项目中使用 npm 包 duallist-box-empretec。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------
------- ---------------------- -----------------------------------------------------------------------
----- ------------------------------------------------------------------- -----------------
----- ------------------------------------------------------------------------- -----------------
------- --------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
----- ------------------------------------------------------------------------------------- -----------------
------- ----------------------------------------------------
-------
------
---- ------------------
------ --------------------- ------------
---- -----------------------
------
--------
----- ------- - -
- ------ -- ----- --- ----
- ------ -- ----- --- ----
- ------ -- ----- --- ---
--
----- ----- - --- ------------------------------ -------- -
----------- ----- -- --------
------- ----- -- --------
------------------ ---- -- ------------
---
---------
-------
-------总结
duallist-box-empretec 是一个非常实用的 npm 包，它的简单易用、可定制化的界面提供了非常便捷的使用体验，可以帮助开发者快速构建出完备的双向选择器。较低的开发门槛和丰富的文档资料，使得这个 npm 包更加适合作为中小型项目的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005a1b981e8991b448ed54b