简介
@beisen-cmps/lookup-v2 是一款前端的 npm 包，用于实现文本输入框的搜索、自动完成和下拉框选择功能，适用于大部分前端框架（React、Vue、Angular 等）。
本文将详细介绍如何使用 @beisen-cmps/lookup-v2 这个 npm 包，包括安装、使用和配置，以及相关示例代码，为前端开发人员提供指导和学习的意义。
安装
从 npm 安装 @beisen-cmps/lookup-v2：
--- ------- ----------------------
或者使用 yarn 安装：
---- --- ----------------------
使用
在工程中引入 @beisen-cmps/lookup-v2 的主文件：
------ -------- ---- -------------------------
在需要使用的组件中使用 ：
----- ----------- ------- --------------- -
------ -- -
------ -
---------
---------------
---- ---------------
--------------- -
------- -------
----- -------
-------- -
--------------- ------------------
-
-
--
----------------- ------- -- -
-------------------- -------
--------------------- --------
--
-----------------------
--
--
-
-配置
Props
value
- 类型：string
- 默认值：''
- 描述：控制输入框的显示内容。
prefix、suffix
- 类型：ReactNode
- 默认值：''
- 描述：前缀和后缀，类似于 Ant Design 的 Input 组件。
serverOption
- 类型：Object
- 默认值：
- ---- --- --------------- - ------- ----- - - - 描述：服务器请求配置，包括请求地址和请求类型等。
cache
- 类型：Boolean
- 默认值：false
- 描述：是否开启缓存，默认为 false。
maxLength
- 类型：Number
- 默认值：50
- 描述：输入框的最大长度。
_onRequestData、_onHandleData、_onRequestError
- 类型：Function
- 默认值：
-------- ------------- -------------- - ------ ----------------------- ------------------------------------- -- ------------ - -------- ------------ ------ - ------ ----- - -------- -------------- ------- - ----------------------------- ------ --- -
- 描述：用于设置请求数据、处理数据和错误处理的函数。
debounceDelay、minChars、minQueryLength
- 类型：Number
- 默认值：100、1、1
- 描述：用于设置自动完成功能的防抖延时，最小字符数和最小查询长度。
ServerOption
@beisen-cmps/lookup-v2 通过向服务器发送请求来获得数据，因此需要配置服务器请求参数。
请求地址和请求类型可以通过 serverOption 参数设置。
---------------
---- ---------------
--------------- -
------- -------
----- ------- -- --
-------- -
--------------- ------------------
-
-
--requestOptions
requestOptions 的详细参数可以参考 fetch API 的文档：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch。
requestData 与 responseData 的格式
@beisen-cmps/lookup-v2 期望用 JSON 格式返回数据，每条数据由下面几个字段组成：
| 字段 | 类型 | 必填 | 描述 |
|---|---|---|---|
| key | string | 是 | 用于唯一确定一条记录 |
| value | string | 是 | 显示在输入框中的值 |
| label | string | 否 | 显示在下拉框中的值 |
| icon | string | 否 | 显示在下拉框中的图标 |
| meta | Object | 否 | 其他附加信息 |
如果返回的数据格式与这个不同，可以通过设置 _onHandleData 方法进行数据格式化。
示例代码
------ ----- ---- --------
------ -------- ---- -------------------------
----- ----------- ------- --------------- -
-------- -
------ -
---------
---------------
---- ---------------
--------------- -
------- -------
----- -------
-------- -
--------------- ------------------
-
-
--
----------------- ------- -- -
-------------------- -------
--------------------- --------
--
-----------------------
--
--
-
-
------ ------- ------------以上就是 @beisen-cmps/lookup-v2 的使用教程，希望对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5851ab1864dac66def