.vue
page where you need the message cloud search feature, introduce <TUISearch>.Parameter Name | Type | Description |
searchType | String | global: global search (default) |
| | conversation: search in conversation |
|
|
| |
import { TUISearch } from "@tencentcloud/chat-uikit-vue";// Global search<TUISearch searchType="global" />// Search in conversation<TUISearch searchType="conversation" />
<TUISearch>
integrated by default. If you prefer not to use the default integration method, you can comment out <TUISearch>
in TUIKit/index.vue
..vue
page where you need the message cloud search feature, introduce <TUISearch>.Parameter Name | Type | Description |
searchType | String | global: global search |
| | conversation: search in conversation (default) |
|
|
| |
// The following is just an example path. Replace it with the path of your project.import { TUISearch } from "/TUIKit/components/TUISearch/index.vue";// Global search<TUISearch searchType="global" />// Search in conversation<TUISearch searchType="conversation" />
<TUISearch>
integrated by default. If you prefer not to use the default integration method, you can comment out <TUISearch>
in TUIKit/components/TUIConversation/index.vue
.{"pages": [...,{"path": "TUIKit/components/TUISearch/index","style": {"navigationBarTitleText": "Chat records"}}],...}
uni.navigateTo({url: "/TUIKit/components/TUISearch/index",});
Original global search message type list | Global search message type list after addition |
| |
src/TUIKit/components/TUISearch/search-type-list.ts
searchMessageTypeList
contains all the definitions in the Search Message Types tab. To add search message types not defined in searchMessageTypeList
, follow the structure below to add them in searchMessageTypeList
:[keyName: string]: {key: string; // Specifies the key of the search message type, which must be unique.label: string; // Specifies the label for rendering the search message type.value: Array<string>; // Specifies the actual search list for the search message type.};// For example, to search for custom messagesexport const searchMessageTypeList = {...customMessage: {key: "customMessage", // Specifies the key of the search message type, which must be unique.label: "Custom", // Specifies the label for rendering the search message type.value: [TUIChatEngine.TYPES.MSG_CUSTOM], // Specifies the actual search list for the search message type.}};
src/TUIKit/locales/zh_cn/TUISearch.ts
and src/TUIKit/locales/en/TUISearch.ts
for translation.searchMessageTypeList
to the global search message type list or search in conversation message type list, you just need to add its key
to globalSearchTypeKeys
or conversationSearchTypeKeys
.// For example, to apply the newly defined customMessage to the global search message type listexport const globalSearchTypeKeys = [..., "customMessage"];// For example, to apply the newly defined customMessage to the search in conversation message type listexport const conversationSearchTypeKeys = [..., "customMessage"];
Original global search time range list | Global search time range list after addition |
| |
src/TUIKit/components/TUISearch/search-time-list.ts
searchMessageTimeList
contains all definitions in the Search Time Range tab. To add search time range types not defined in searchMessageTimeList
, follow the structure below to add them in searchMessageTimeList
:[keyName: string]: {key: string; // Specifies the key of the message search time range, which must be unique.label: string; // Specifies the label for rendering the message search time range.value: {timePosition: number; // Specifies the start position for message search time range. The default value is 0, indicating searching from the current time.timePeriod: number; // Specifies the time range to search backward from timePosition.};};// For example, to search for messages in the time range of last 2 daysexport const searchMessageTimeList = {...twoDay: {key: "twoDay", // Specifies the key of the message search time range, which must be unique.label: "Two days", // Specifies the label for rendering the message search time range.value: {timePosition: 0, // Specifies the start position for message search time range. The default value is 0, indicating searching from the current time.timePeriod: 2 * oneDay; // Specifies the time range to search backward from timePosition.},},};
src/TUIKit/locales/zh_cn/TUISearch.ts
and src/TUIKit/locales/en/TUISearch.ts
for translation.
Was this page helpful?