Cuttlefish Docs
  • 简体中文

    • spz-typist

    何时使用

    spz-typist 以打字机效果逐字显示文本内容。

    支持布局

    • container
    • logic

    代码演示

    基本用法

    <spz-typist content="Hello, World!" speed="50"></spz-typist>

    动态更新文本

    <spz-typist id="my-typist" content="初始文本" speed="30"></spz-typist>

<button @tap="my-typist.setContent(content='更新后的文本')">
  更新文本
</button>

    使用子元素

    也可以直接将内容放在子元素中：

    <spz-typist layout="container" speed="50">
  欢迎使用
  <strong>spz-typist</strong>
  组件！
</spz-typist>

    属性

    属性名说明类型是否必需
    content以打字机效果显示的文本内容。省略时使用元素的子内容string否
    speed每个字符的打字速度（毫秒）。默认：80number否

    Actions

    setContent

    以编程方式设置内容。会清除所有先前状态并从头开始重新打字。

    参数：

    • content (string)：要显示的新内容

    示例：

    <spz-typist id="my-typist" content="Hello"></spz-typist>
<button @tap="my-typist.setContent(content='Hello, World!')">
  更新内容
</button>

    Events

    事件名说明数据
    typingStart打字开始时触发—
    typing每个字符输出时触发{element, segment, segmentIndex, charIndex, totalChars}
    typingOneLine一行（段落）完成时触发{element, segment, segmentIndex}
    typingFinish所有打字完成时触发—

    状态属性

    属性名说明
    typist-typing组件正在打字时存在
    typist-finish所有打字完成后存在
    typist-waiting等待 SPZ 子元素构建时存在

    工作原理

    • 组件在布局完成后自动开始打字。
    • 当 content 属性更新时，会使用新内容从头开始打字。
    • 支持嵌套子元素和 SPZ 元素（等待 SPZ 元素构建完成后再输出其内容）。
    • 自动滚动以保持当前打字行可见。

    注意事项

    • 该组件不提供 setSpeed action；如需动态修改速度，请直接更新 speed 属性。