介绍
nt-web-select 是一个基于原生 HTML、CSS、JS 的 UI 前端组件，它能够让用户更加方便地进行多选或单选操作。通过使用该组件，你可以减少代码量，同时提供更好的用户体验。
该组件可用于以下场景：
- 多个选项单选；
- 多个选项多选；
- 分组选项多选；
- 异步加载选项；
安装
在使用 nt-web-select 之前，您需要在本地安装 npm。npm 包管理器是 NodeJS 的包管理器，用于安装各类 WEB 应用程序工具库，以及一些自己编写的插件等。
下载 npm
下载地址：https://www.npmjs.com/get-npm。请根据您的情况选择下载对应版本的 npm。
安装 nt-web-select
在终端或者命令行工具中输入以下命令即可安装：
npm install nt-web-select --save
导入依赖项
在您的 HTML 文件中导入
nt-web-select，如下所示：<link rel="stylesheet" href="./node_modules/nt-web-select/dist/nt-web-select.min.css" /> <script type="text/javascript" src="./node_modules/nt-web-select/dist/nt-web-select.min.js"></script>
使用
在导入依赖项后，就可以开始使用 nt-web-select 了。使用 nt-web-select 非常方便，因为它是一个自包含的组件。可以在任何 DOM 元素中来使用。
-- -------------------- ---- -------
---- --------------------
------- -----------------------
----- -------- - --- -------------------------- -
-------- -
-
------ ------
------ ---------
--
-
------ ------
------ ---------
-
-
---
---------示例
基础使用
-- -------------------- ---- -------
---- --------------------
------- -----------------------
----- -------- - --- -------------------------- -
-------- -
-
------ ------
------ ---------
--
-
------ ------
------ ---------
--
-
------ ------
------ ---------
-
-
---
---------多选
使用 multiple: true 可以启用多选模式。
-- -------------------- ---- -------
---- --------------------
------- -----------------------
----- -------- - --- -------------------------- -
--------- -----
-------- -
-
------ ------
------ ---------
--
-
------ ------
------ ---------
--
-
------ ------
------ ---------
-
-
---
---------分组
-- -------------------- ---- -------
---- --------------------
------- -----------------------
----- -------- - --- -------------------------- -
--------- -----
-------- -
-
------ ------
-------- -
-
------ --- -----
------ -----------
--
-
------ --- -----
------ -----------
-
-
--
-
------ ------
-------- -
-
------ --- -----
------ -----------
--
-
------ --- -----
------ -----------
-
-
--
-
---
---------异步加载
-- -------------------- ---- -------
---- --------------------
------- -----------------------
----- -------- - --- -------------------------- -
--------- -----
--------- -----
------------- -------- ---------- --------- -
------------------- -- -
----- ---- - -
-
------ ------
-------- -
-
------ --- -----
------ -----------
--
-
------ --- -----
------ -----------
-
-
--
-
------ ------
-------- -
-
------ --- -----
------ -----------
--
-
------ --- -----
------ -----------
-
-
--
--
---------------
-- -----
--
--------- -------- ---------- -
----------------------
-
---
---------API 参考
| 名称 | 类型 | 说明 |
|---|---|---|
| options | Object[] | 选项列表，其中每一个对象都包含 label 和 value 属性 |
| multiple | Boolean | 是否多选，默认为 false |
| autoload | Boolean | 是否加载子项，只针对分组类型的选框有效 |
| loadChildren | Function | 异步加载子项时的回调方法，该方法接受两个参数：parentId 为当前分组 id，callback 为回调方法 |
| onSelect | Function | 选中选项时的回调方法，该方法接受一个参数，为选中的项的值 |
总结
如今，对于规模较大的前端项目，使用原生 HTML、CSS、JS 开发已经越来越被人所青睐。这不仅仅因为原生开发能够带来更好的性能，更多的原生技术在应用场景上也越来越成熟。nt-web-select 就是一款使用原生技术打造的前端 UI 组件，通过使用该组件，可以大大提高代码的复用率、可维护性，提升产品的用户体验。
感谢您的阅读，如果您觉得这篇文章对您有所帮助，希望您可以点个赞或者分享给更多人。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66cd3