spz-typist 打字机效果

以逐字打印的方式展示文本内容，支持自定义打字速度和动态更新文本

布局

何时使用

需要以打字机效果逐字显示文本内容，增强页面的动态感和沉浸感。
需要在 AI 生成内容场景中模拟流式输出效果时。
需要通过按钮或事件动态更新打字内容时。

代码演示

基本用法

通过 content 属性设置要打字显示的文本，speed 属性控制每个字符的打印间隔（毫秒），组件在布局完成后自动开始打字。

<spz-typist layout="container" content="欢迎使用 spz-typist 打字机效果组件！字符将以逐字打印的方式呈现，默认速度为 80ms/字符。" speed="60"></spz-typist>

方法调用

使用 setContent 方法可以在运行时动态更新打字内容，调用后会停止当前打字，清除已有状态并重新开始。

<div class="typist-api-wrap">
  <spz-typist
    id="my-typist"
    layout="container"
    content="初始内容：点击下方按钮可更新打字内容。"
    speed="60"
  ></spz-typist>

  <div class="demo-buttons">
    <button @tap="my-typist.setContent(content='新内容已更新！setContent 方法会清除旧内容并重新开始打字效果。')">更新内容</button>
    <button @tap="my-typist.setContent(content='短文本。')">快速完成</button>
  </div>
</div>

属性

属性名	说明	类型	默认值	是否必需
content	要以打字机效果显示的文本内容，也可直接将内容放在子节点中	string	-	否
speed	每个字符的打印间隔，单位毫秒，值越小打字越快	number	`80`	否

方法

setContent

动态更新打字内容。调用后会停止当前打字效果，清除所有已有状态，并以新内容重新开始打字。

参数	说明	类型	是否必需
content	新的打字内容	string	是

事件

typingStart

打字效果开始时触发。

typing

每打印一个字符时触发，事件数据包含 segment（当前文本段）、segmentIndex（段落索引）、charIndex（当前字符索引）、totalChars（当前段落总字符数）。

typingOneLine

每个文本段落打字完成时触发，事件数据包含 segment（已完成的文本段）和 segmentIndex（段落索引）。

typingFinish

所有内容打字完成时触发。