实现常用快捷回复 - IM 即时通讯 UIKit

开发者中心

IM 即时通讯 UIKit

集成开发

实现常用快捷回复

更新时间： 2024/07/26 13:39:23

本文主要介绍如何实现常用快捷回复消息。

实现步骤

增加自定义发送按钮。

React

//全局上下文
const { store } = useStateContext()
const actions = [
{
    action: 'sendPhrases',
    visible: true,
    render: () => {
    return (
        <div style={{margin: '0 10px', fontSize: '14px'}}>
        <i style={{ fontSize: '14px'}} className="iconfont seeting">&#xe6d6;</i>
        </div>
    )
    }
},
{
    action: 'emoji',
    visible: true,
},
{
    action: 'sendImg',
    visible: true,
},
{
    action: 'sendFile',
    visible: true,
},
{
    action: 'sendMsg',
    visible: true,
}
]

<ChatContainer
...
    actions={actions}
/>

Vue

<template>
    <div ref="chat" />
</template>

<script>
    ...
    mounted() {
        this.$uikit.render(
        ChatContainer,
        {
            actions: [
            {
                action: 'sendPhrases',
                visible: true,
                render: () => {
                return compile(
                    `<div style={{margin: '0 10px', fontSize: '14px'}}>
                        <i className="iconfont icon-logout" />       
                    </div>`)
                }
            },
            {
                action: 'emoji',
                visible: true,
            },
            {
                action: 'sendImg',
                visible: true,
            },
            {
                action: 'sendFile',
                visible: true,
            },
            {
                action: 'sendMsg',
                visible: true,
            }
            ]
        },
        this.$refs.chat
        );
    }
</script>

单击自定义发送按钮出现常用语列表。

React

//全局上下文
const { store } = useStateContext()

//todo 常用语列表自行实现
const showPhrasesList = () => {
    
}
const actions = [
{
    action: 'sendPhrases',
    visible: true,
    render: () => {
    return (
        <div onClick={showPhrasesList} style={{margin: '0 10px', fontSize: '14px'}}>
        <i style={{ fontSize: '14px'}} className="iconfont seeting">&#xe6d6;</i>
        </div>
    )
    }
},
{
    action: 'emoji',
    visible: true,
},
{
    action: 'sendImg',
    visible: true,
},
{
    action: 'sendFile',
    visible: true,
},
{
    action: 'sendMsg',
    visible: true,
}
]

<ChatContainer
...
    actions={actions}
/>

Vue

<template>
    <div ref="chat" />
</template>

<script>
    ...
    methods: {
        //todo 常用语列表自行实现
        showPhrasesList() {
        
        }
    },
    mounted() {
        this.$uikit.render(
        ChatContainer,
        {
            actions: [
            {
                action: 'sendPhrases',
                visible: true,
                render: () => {
                return compile(
                    `<div onClick={context.showPhrasesList} style={{margin: '0 10px', fontSize: '14px'}}>
                        <i className="iconfont icon-logout" />       
                    </div>`, { showPhrasesList: this.showPhrasesList })
                }
            },
            {
                action: 'emoji',
                visible: true,
            },
            {
                action: 'sendImg',
                visible: true,
            },
            {
                action: 'sendFile',
                visible: true,
            },
            {
                action: 'sendMsg',
                visible: true,
            }
            ]
        },
        this.$refs.chat
        );
    }
</script>

单击常用语列表，调用 store 中的发送消息方法（sendTextMsgActive）发送消息。

React

import { useStateContext } from '@xkit-yx/im-kit-ui
const PhrasesList= () => {
    const { store } = useStateContext()
    const sendMsg = (text) => {
    const [scene, to] = store.uiStore.selectedSession.split('-')
    store.msgStore.sendTextMsgActive({
        scene,
        to,
        body: text,
        })
    
    }
    return (
    <div>
        <p onClick={() => sendMsg('text')}>请描述您的问题～</p>
        <p>好久没聊天了，快来和我说说话～</p>
        //...
    </div>
)
}

export default PhrasesList;

Vue

<template>
<div>
    <p @click="sendMsg('text')">请描述您的问题～</p>
    <p>好久没聊天了，快来和我说说话～</p>
    <!-- ... -->
</div>
</template>

<script>

export default {
name: 'PhrasesList',
methods: {
    sendMsg(text) {
    const { store, nim } = window.__xkit_store__
    const [scene, to] = store.uiStore.selectedSession.split('-');
    store.msgStore.sendTextMsgActive({
        scene,
        to,
        body: text,
    });
    }
}
}
</script>

API 参考

im-store

在线咨询

微信咨询

电话咨询

此文档是否对你有帮助？

有帮助

去反馈

实现步骤
API 参考