ConversationSearch 是使用的 Search 组件,支持用户、群组、消息的搜索功能。它集成了搜索框、高级搜索、搜索结果展示等功能。
基础使用
<template><ConversationSearch {...props} @ResultItemClick={onSelectResult} /></template><script setup lang="ts">import { ConversationSearch,SearchType
} from '@tencentcloud/chat-uikit-vue3';import type {SearchResultItem
} from '@tencentcloud/chat-uikit-vue3';const props = defineProps<ConversationSearchProps>();const onSelectResult = (data
:
SearchResultItem
,
type
:
SearchType
) => {console.warn(`Select Search Result: ${JSON.stringify(data)}, type: ${type
}`);};</script>
<template><UIKitProvider><ConversationList ConversationSearch={CustomConversationSearch} /></UIKitProvider></template><script setup lang="ts">import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';import CustomConversationSearch from "./CustomConversationSearch.vue";</script>
Props
参数名 | 类型 | 默认值 | 说明 |
visible | boolean | true | 是否可见 |
ComponentType<SearchProps> | - | 自定义搜索组件 | |
variant | VariantType | VariantType.MINI | 搜索模式: mini:迷你 standard:标准 embedded:嵌入式 |
Component<SearchBarProps> | DefaultSearchBar | 自定义搜索框组件 | |
Component<SearchResultsProps> | DefaultSearchResults | 自定义搜索结果组件 | |
Component<SearchAdvancedProps> | DefaultSearchAdvanced | 自定义高级搜索组件 | |
SearchResultsPresearch | Component | - | 搜索前占位符组件 |
SearchResultsLoading | Component | - | 加载中占位符组件 |
SearchResultsEmpty | Component | - | 空结果占位符组件 |
SearchResultItem | Component<ResultItemProps> | - | 自定义搜索结果项组件 |
debounceTime | number | 300 | 搜索防抖时间(毫秒) |
autoFocus | boolean | false | 是否自动聚焦搜索框 |
className | string | - | 自定义样式类名 |
style | CSSProperties | - | 自定义样式 |
onKeywordChange | (keyword: string) => void | - | 搜索关键词变化回调 |
onSearchComplete | (results: Map<SearchType, SearchResult>) => void | - | 搜索完成回调 |
onResultItemClick | (data: SearchResultItem, type: SearchType) => void | - | 搜索结果点击回调 |
onError | (error: Error) => void | - | 搜索错误回调 |