SearchHistory 搜索历史
搜索历史展示组件,支持最近搜索、搜索发现、输入关键词联想、删除管理与返回箭头(单独搜索页场景)。
演示
9:41
代码示例
引入
推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-search-history />。
API
SearchHistory Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| recentSearchData | Array<SearchHistoryItem> | 最近搜索数据 | N | |
| searchDiscoverData | Array<SearchHistoryItem> | 搜索发现数据 | N | |
| suggestData | Array<SearchHistoryItem> | 搜索关键词列表数据,输入时展示 | N | |
| selectedKeys | Array<string> | 已选中的关键词,命中后在搜索发现中高亮/勾选 | N | |
| showSuggest | boolean | true | 输入关键词时是否展示关键词列表 | N |
| suggestMaxHeight | number | 240 | 关键词列表虚拟渲染的窗口高度(px),列表区实际铺满搜索框下方空间,按此值估算单屏渲染行数 | N |
| deleteType | string | "all" | 删除模式,可选 all / single;single 时每个标签可单独删除 | N |
| placeholder | string | "请输入关键词" | 输入框占位符 | N |
| searchButtonText | string | "搜索" | 搜索按钮文案 | N |
| rightIcon | string | "" | 输入框右侧图标名称,为空时不显示 | N |
| showBack | boolean | false | 是否显示返回箭头,用于单独搜索页场景 | N |
| recentTitle | string | "最近搜索" | 最近搜索标题 | N |
| discoverTitle | string | "搜索发现" | 搜索发现标题 | N |
| showRefresh | boolean | false | 是否显示换一换 | N |
| showDiscoverToggle | boolean | true | 是否显示发现区显隐切换 | N |
| discoverHiddenText | string | "搜索发现已隐藏" | 发现区隐藏提示文案 | N |
| emptyText | string | "暂无数据" | 空数据文案 | N |
| searchButtonBgColor | string | "" | 搜索按钮背景色,设置后为填充样式(文字白色),为空时为纯文字按钮 | N |
| customStyle | string | "" | 自定义样式 | N |
SearchHistory Events
| 名称 | 参数 | 描述 |
|---|---|---|
| click-search-button | keyword: string | - |
| delete | - | 删除时触发 |
| delete-single | keyword: string | - |
| click-tag | keyword: string | - |
| refresh | - | 刷新时触发 |
| input | keyword: string | 输入时触发 |
| suggest-click | keyword: string | - |
| right-icon-click | - | - |
| back | - | - |
SearchHistory Slots
| 名称 | 描述 |
|---|---|
| - | - |
