自定义搜索界面 UI - IM 即时通讯 UIKit

开发者中心

IM 即时通讯 UIKit

集成开发

自定义搜索界面 UI

更新时间： 2024/09/27 10:50:00

如果默认的搜索组件（search-kit）无法满足您的业务需求，您可通过本节介绍的参数进行界面自定义。

自定义参数概览

search-kit 提供的自定义参数如下：

参数	类型	说明	子组件
`renderEmpty`	`(() => Element)`	没有好友和群组时的状态展示，具体示例参见下文的自定义好友和群组为空时的内容	Search 组件
`renderSearchResultEmpty`	`(() => Element)`	没有搜索结果时的自定义渲染，默认的展示内容参见搜索结果为空时的内容	Search 组件
`onClickChat`	`(() => void)`	点击去聊天回调	Add 组件
`prefix`	string	样式前缀，默认值："search"
`commonPrefix`	string	公共样式前缀，默认值："common"

自定义示例

自定义好友和群组为空时的内容

查看在线示例

在 IMAppProps 传入正确的 appkey、account 和 token 即可在线预览效果。

示例代码

React

jsx/tsxconst renderEmpty = () => {
return (
<div className='wrapper'>
    <img className='avatar' src="https://yx-web-nosdn.netease.im/common/3b71a381b4e6d69b226c611d44cb4f1a/没有订单.png" alt="" />
    <div className='no-session'>您暂无好友哦～</div>
</div>
)
}

<SearchContainer renderEmpty={renderEmpty} />

Vue2/Vue3

js/ts<template>
    <div ref="search" />
</template>

<script>
    ...
    mounted() {
        this.$uikit.render(
        SearchContainer,
        {
            renderEmpty: () => {
            return compile(
                `<div className='wrapper'>
                    <img className='avatar' src="https://yx-web-nosdn.netease.im/common/3b71a381b4e6d69b226c611d44cb4f1a/没有订单.png" alt="" />
                    <div className='no-session'>您暂无好友哦～</div>
                </div>`
                )
            }
        },
        this.$refs.search
        );
    }
</script>

效果对比

默认

自定义后

自定义参数概览

自定义示例

自定义好友和群组为空时的内容

相关图例

搜索结果为空时的内容