StreamingText 流式文本

逐字显示文本的打字机效果组件，支持 Unicode 完整字素簇（防止 Emoji 表情截断）、速度调节与暂停/完成控制，专为 AI 流式响应设计。

基础用法

通过 text 传入累积文本，组件自动检测追加和重置。

│

<script setup>
import { ref, onUnmounted } from 'vue'
import StreamingText from '@/vue/components/StreamingText.vue'

const text = ref('')
const fullText = '你好！我是 AI 助手，很高兴为你服务。有什么我可以帮助你的吗？'
let idx = 0
const timer = setInterval(() => {
  idx++
  text.value = fullText.slice(0, idx)
  if (idx >= fullText.length) {
    clearInterval(timer)
  }
}, 80)

onUnmounted(() => clearInterval(timer))
</script>
<template>
  <div style="padding: 12px; border: 1px solid var(--vk-border-color); border-radius: 4px;">
    <StreamingText :text="text" :speed="2" :interval="50" />
  </div>
</template>

不同速度

通过 speed 控制每 tick 显示的字符数。

speed: 1 (默认)

│

speed: 3

│

<script setup>
import StreamingText from '@/vue/components/StreamingText.vue'
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div>
      <p style="font-size: 12px; color: var(--vk-text-color-secondary); margin-bottom: 4px;">speed: 1 (默认)</p>
      <StreamingText text="这是速度为1的流式文本效果" :speed="1" :interval="50" />
    </div>
    <div>
      <p style="font-size: 12px; color: var(--vk-text-color-secondary); margin-bottom: 4px;">speed: 3</p>
      <StreamingText text="这是速度为3的流式文本效果" :speed="3" :interval="50" />
    </div>
  </div>
</template>

双框架使用示例

Vue 3

<template>
  <div class="stream-box">
    <StreamingText
      :text="fullText"
      :speed="2"
      :show-cursor="true"
      cursor-style="line"
      @complete="handleComplete"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { StreamingText } from '@bobocn/element/vue'
import '@bobocn/element/style.css'

const fullText = ref('')

onMounted(() => {
  const content = '你好！我是基于 Bobo-Elements 构建的 AI 助手。'
  let index = 0
  const timer = setInterval(() => {
    index += 2
    fullText.value = content.slice(0, index)
    if (index >= content.length) clearInterval(timer)
  }, 100)
})

const handleComplete = () => {
  console.log('打字动画全部播放完毕')
}
</script>

React

import React, { useState, useEffect } from 'react'
import { StreamingText } from '@bobocn/element/react'
import '@bobocn/element/style.css'

export default function App() {
  const [text, setText] = useState('')

  useEffect(() => {
    const full = '你好！我是基于 Bobo-Elements 构建的 AI 助手。'
    let index = 0
    const timer = setInterval(() => {
      index += 2
      setText(full.slice(0, index))
      if (index >= full.length) clearInterval(timer)
    }, 100)
    return () => clearInterval(timer)
  }, [])

  return (
    <StreamingText
      text={text}
      speed={2}
      showCursor
      cursorStyle="line"
      onComplete={() => console.log('打字动画全部播放完毕')}
    />
  )
}

API

属性 (Attributes / Props)

属性名	说明	类型	默认值
text	累积全文内容（组件自动比对增量并打字输出）	string	''
speed	每次触发推进的字素/字符数	number	1
interval	每 tick 渲染时间间隔 (ms)	number	50
showCursor	是否显示打字光标	boolean	true
cursorChar	光标自定义符号	string	'│'
cursorStyle	光标样式形态	'line' | 'block' | 'underline'	'line'
paused	是否暂停打字动画播放	boolean	false

事件 (Events)

事件名	说明	回调参数
complete / onComplete	当文本完全呈现且队列消费完毕时触发	—

方法 (Exposes / Ref)

方法名	说明	类型
reset	重置回到初始空状态	() => void
finish	立即跳过动画呈现全文	() => void
pause	暂停打字渲染输出	() => void
resume	恢复继续打字输出	() => void
isComplete	当前是否已全部输出完毕	boolean