介绍
@beisen/upaas-lookup-v1 是一个前端常用组件，用于搜索和展示数据的功能。它支持输入关键字进行搜索，同时也支持翻页和多种数据展示模式。本教程将为大家介绍该组件的使用方法和注意事项。
安装
使用 npm 进行安装：
yarn add @beisen/upaas-lookup-v1
或者使用 npm:
npm install @beisen/upaas-lookup-v1
使用方法
引入组件
在需要使用 @beisen/upaas-lookup-v1 的页面或组件内，通过以下方式引入组件：
import UpaasLookup from '@beisen/upaas-lookup-v1';
组件参数
目前，@beisen/upaas-lookup-v1 支持以下参数：
| 名称 | 类型 | 描述 |
|---|---|---|
| dropdown | boolean | 是否提供下拉框选择功能，建议使用异步搜索时开启此参数。 |
| maxShowCount | number | 最多展示的列表项数量。 |
| pageSize | number | 每页展示的列表项数量 |
| debounceTime | number | 异步搜索时的防抖时间，单位为毫秒。 |
| scrollCotent | string | 列表所在容器的滚动区域选择器，用于翻页时计算下一页的数据。 |
| searchPlaceholder | string | 搜索框提示文字。 |
| preSearch | function | 当在搜索框输入新关键字时，发送请求前的数据处理函数。 |
| afterSearch | function | 当搜索请求返回数据后的数据处理函数，用于加工后端返回的数据或者进行业务逻辑处理。 |
| search | function(searchWord: string) | 点击搜索或输入回车键时调用的函数，searchWord 为搜索框中的输入内容。 |
| fetchCallback | function(data: any) | 异步请求完成后的回调函数，参数 data 为返回的数据。 |
| filterData | function(data: any) | 当通过异步请求获得数据后，对数据进行过滤或加工的函数。 |
| onDataChange | function(dataSource: any) | 当数据源发生改变时的回调函数。 |
| selectedCallback | function(selected: any) | 当用户选择某个列表项时的回调函数，返回选择的列表项数据。 |
| uniqueIdKey | string | 唯一的标识符名称，用于生成唯一的 key 值。 |
| dataListKey | string | 数据数组的键名，用于指定数据数组在返回数据中的名称。 |
| loading | boolean | 是否展示 loading 图标。 |
| dataSource | any[] | 列表数据源，可以通过在父组件的 state 中定义，在 @beisen/upaas-lookup-v1 中引用即可。 |
| buttonConfig | {text: string, onClick: () =>any}[] | 自定义的操作按钮数组，包含每个按钮的文字与 onclick 回调方法。 |
| defaultSelect | any | 当开始时需要选中的列表项数据。 |
| renderItem | (item: any) => React.ReactNode | 列表每个数据项的渲染方法。 |
| renderScrollToBottom | () => React.ReactNode | 列表滚动到底部时的展示项。 |
| renderSearchContainer | () => React.ReactNode | 搜索框和操作按钮的容器，作为整个组件的顶层容器。 |
| renderNoData | () => React.ReactNode | 当结果集为空时的展示项。 |
简单示例
以下示例为一个简单的应用实例，仅仅包含了一个基本的搜索框和一个数据展示列表。
通过在组件当中传递一个包含数据的数组 dataSource，以及一个自定义的列表项呈现方式的 renderItem 方法，即可使用 @beisen/upaas-lookup-v1 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------------------------
--------- --------- -
----- ------
----------- ---------- ---- -- -----
-
------ ------- -------- ----------- ---------- -
----- - ----- ---------- - - ------
----- --------- ----------- - -------------
-------- --------------- ------- -
--------------------
-
-------- ---------------- ---- -
------ -
---- ----------- -- -----------------------------------
--
-
------ -
-----
------------
-----------------
-----------------------
----------------------------
---------------
--
------
--
-
总结
本文以 @beisen/upaas-lookup-v1 组件为例，详细介绍了其使用方法和注意事项。当使用该组件时，要注意传递组件所需的参数，并实现所需的方法进行逻辑处理。 建议开发者们根据自己的需求来使用 @beisen/upaas-lookup-v1 组件，组件使用的灵活性非常高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560e881e8991b448df250