更新记录

1.0.0（2025-01-14） 下载此版本

模仿 AI 聊天时的打字效果，全平台支持，无任何依赖，不预设任何样式，完全由用户自定义模板和样式，简洁、灵活、高效。

平台兼容性

uni-app

其他

bp-typer

模仿 AI 聊天时的打字效果，全平台支持，无任何依赖，不预设任何样式，完全由用户自定义模板和样式，简洁、灵活、高效。

示例

<template>
    <view class="content">

        <bp-typer
            ref="typerRef"
            :text="greeting"
            auto-start
            :interval="100"
            @on-changed="handleChanged"
            @on-completed="handleCompleted"
            v-slot="{ text }"
        >
           <view class="chat">
                {{ text }}
           </view>
        </bp-typer>

        <view class="actions">
            <button type="default" @click="$refs.typerRef.start()">开始</button>
            <button type="default" @click="$refs.typerRef.restart()">重新开始</button>
            <button type="default" @click="$refs.typerRef.stop()">停止</button>
            <button type="default" @click="$refs.typerRef.pause()">暂停</button>
            <button type="default" @click="$refs.typerRef.resume()">恢复</button>
            <button type="default" @click="handleChangeText">改变文案</button>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                greeting: '您好！很高兴第一次与您交流。我是您的AI助理，有什么我可以帮到您的吗？请随时告诉我您的需求。',
            }
        },
        methods: {
            handleChangeText() {
                this.greeting = '如果没有其他问题，我就先不打扰您了，感谢您的时间。祝您今天愉快！再见。'
            },
            handleCompleted() {
                console.log('handleCompleted')
            },
            handleChanged(index) {
                console.log('handleChanged', index)
            },
        }
    }
</script>

<style scoped>
    .content {
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        padding: 30rpx;
        background-color: #F3F4F5;
    }
    .chat {
        padding: 30rpx;
        background-color: #ffffff;
        border: 1rpx solid #99999999;
        border-radius: 12rpx;
        color: #171A1D;
    }

    .actions {
        margin-top: 40rpx;
    }
</style>

API

属性

事件

插槽

暴露