caimei-applets-caimei/pages/user/chats/components/chat-html.vue

<template>
    <view>
        <view v-for="(chat, index) in messages" :key="index" class="cm_ai_answer"
            :class="chat.from === 'me' ? 'user' : ''">
            <view class="cm_ai_html" :class="chat.from === 'me' ? 'user' : ''">
                <template v-if="chat.from === 'me'">
                    {{ chat.question }}
                </template>
                <template v-else>
                   <!-- <image v-if="isLoading" class="cm_ai_html_loading" src="https://static.caimei365.com/app/img/chat/icon-loading@2x.gif" /> -->
                   <!-- <template v-else> -->
                       <text v-if="chat.typing">{{ chat.question.substring(0, chat.currentLength) }}</text>
                       <text v-else>{{ chat.question }}</text>  
                   <!-- </template> -->
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'chatHtml',
        props: {
            messages: {
                type: Array
            }
        },
        data() {
            return {
                chatList: [],
            }
        },
        created() {
           
        },
        computed: {

        },
        watch: {
            messages: {
                handler: function(val) {
                    console.log('messages', val)
                    this.startTypingEffect(this.messages[this.messages.length - 1])
                }
            }
        },
        methods: {
            startTypingEffect(message) {
                if (!message.typing) {
                    message.typing = true // 标记为正在打字  
                    let currentLength = 0
                    const typeEffect = () => {
                        if (currentLength < message.question.length) {
                            message.currentLength++ // 增加已显示的文本长度  
                            // 如果需要，可以在这里添加一些性能优化或条件检查  
                            setTimeout(typeEffect, 50) // 每100毫秒增加一个字符  
                        } else {
                            message.typing = false // 打字完成  
                        }
                    }
                    typeEffect() // 开始打字效果  
                }
            }
        }
    }
</script>

<style lang="scss">
    .cm_ai_answer {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        position: relative;
        margin: 20rpx 0;
        display: flex;
        justify-content: flex-start;

        &.user {
            justify-content: flex-end;
        }

        .cm_ai_html {
            min-height: 80rpx;
            border-radius: 0 30rpx 30rpx 30rpx;
            line-height: 1.5715;
            background-color: #FFFFFF;
            box-sizing: border-box;
            padding: 20rpx;
            font-size: 30rpx;
            color: #666666;

            &.user {
                min-height: 80rpx;
                border-radius: 30rpx 30rpx 0 30rpx;
                background-color: rgba(255, 91, 0, 0.1);
                font-size: 30rpx;
                color: #333333;
            }

            .cm_ai_html_loading {
                width: 60rpx;
                height: 14rpx;
            }
        }
    }
</style>