SearchHistory 搜索历史

搜索历史展示组件,支持最近搜索、搜索发现、输入关键词联想、删除管理与返回箭头(单独搜索页场景)。

演示

9:41

代码示例

<re-search-history :show-back="true" :recent-search-data="recentSearchData" :search-discover-data="searchDiscoverData" :suggest-data="suggestList" :selected-keys="selectedKeys" delete-type="single" placeholder="请输入搜索内容" :show-refresh="true" :show-discover-toggle="true" right-icon="camera" @back="goBack" @input="onInput" @suggest-click="onSuggestClick" @click-search-button="onSearch" @click-tag="onTagClick" @delete="clearRecent" @delete-single="deleteSingle" @refresh="onRefresh" @right-icon-click="onCameraClick" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-search-history />。

API

SearchHistory Props

名称类型默认值描述必传
recentSearchDataArray<SearchHistoryItem>最近搜索数据N
searchDiscoverDataArray<SearchHistoryItem>搜索发现数据N
suggestDataArray<SearchHistoryItem>搜索关键词列表数据,输入时展示N
selectedKeysArray<string>已选中的关键词,命中后在搜索发现中高亮/勾选N
showSuggestbooleantrue输入关键词时是否展示关键词列表N
suggestMaxHeightnumber240关键词列表虚拟渲染的窗口高度(px),列表区实际铺满搜索框下方空间,按此值估算单屏渲染行数N
deleteTypestring"all"删除模式,可选 all / single;single 时每个标签可单独删除N
placeholderstring"请输入关键词"输入框占位符N
searchButtonTextstring"搜索"搜索按钮文案N
rightIconstring""输入框右侧图标名称,为空时不显示N
showBackbooleanfalse是否显示返回箭头,用于单独搜索页场景N
recentTitlestring"最近搜索"最近搜索标题N
discoverTitlestring"搜索发现"搜索发现标题N
showRefreshbooleanfalse是否显示换一换N
showDiscoverTogglebooleantrue是否显示发现区显隐切换N
discoverHiddenTextstring"搜索发现已隐藏"发现区隐藏提示文案N
emptyTextstring"暂无数据"空数据文案N
searchButtonBgColorstring""搜索按钮背景色,设置后为填充样式(文字白色),为空时为纯文字按钮N
customStylestring""自定义样式N

SearchHistory Events

名称参数描述
click-search-buttonkeyword: string-
delete-删除时触发
delete-singlekeyword: string-
click-tagkeyword: string-
refresh-刷新时触发
inputkeyword: string输入时触发
suggest-clickkeyword: string-
right-icon-click--
back--

SearchHistory Slots

名称描述
--