打字机 Typewriter

一个模拟打字机效果的组件，常用于标题或介绍性文字的展示。

基本用法

Typewriter 支持多种命令组合成完整的打字序列： type 命令负责逐字输出文本，backspace 逐字删除，delay 暂停一段时间，clear 清空已输出的全部内容。

当 text 属性绑定的响应式对象发生引用改变时，Typewriter 内部状态将会重置。若仅修改该对象内部的某个属性，则此次修改会在该命令下一次被打印时生效。

|

隐藏源代码

样式命令

使用 setTypeColor 和 setTypeClass 命令可以分别设置后续输出的文字颜色和 CSS 类名，从而在同一段文字中呈现不同的样式。

|

|

隐藏源代码

自定义内容

Typewriter 提供 default 插槽来自定义文本渲染，接收当前输出文本；caret 插槽用于自定义光标，接收光标可见状态。

▊

|

隐藏源代码

循环

使用 loop 属性可以让 Typewriter 循环播放命令序列。

|

隐藏源代码

手动控制

通过 autoplay 属性可以控制打字是否自动开始。组件还暴露 start、pause、resume、reset 方法，便于手动控制打字过程：start 从头开始播放，pause 暂停当前打字，resume 从暂停处继续，reset 根据属性状态重置播放并视 autoplay 决定是否自动继续。

|

隐藏源代码

API

TypewriterProps

属性	类型	可选	默认值	描述	版本
text	TypewriterText[]	是	[]	Typewriter 的打字命令序列。	0.2.0
typeSpeed	number	是	80	Typewriter 打字的速度（毫秒/字符）。	0.2.0
deleteSpeed	number	是	40	Typewriter 退格删除的速度（毫秒/字符）。	0.2.0
startDelay	number	是	0	Typewriter 开始打字前的延迟时间。	0.2.0
loop	boolean	是	false	Typewriter 是否循环播放命令序列。	0.2.0
autoplay	boolean	是	true	Typewriter 是否自动开始打字。	0.2.0
caret	boolean	是	true	是否显示 Typewriter 的光标。	0.2.0
caretText	string	是	'|'	Typewriter 光标的文本内容。	0.2.0
blinkSpeed	number	是	500	Typewriter 光标的闪烁速度（毫秒间隔）。	0.2.0

TypewriterEvents

事件	参数	描述	版本
start		Typewriter 开始打字时触发。	0.2.0
end		Typewriter 打完所有命令时触发。	0.2.0
textChange	text: string	Typewriter 当前输出文本变化时触发。	0.2.0
indexChange	index: number	Typewriter 执行命令索引变化时触发。	0.2.0

TypewriterSlots

插槽	参数	描述	版本
default	text: string	自定义 Typewriter 的文本渲染。	0.2.0
caret	visible: boolean	自定义 Typewriter 的光标。	0.2.0

TypewriterExpose

属性	类型	可选	默认值	描述	版本
start	() => void	否		（重新）开始 Typewriter 的打字过程。	0.2.0
pause	() => void	否		暂停 Typewriter 的打字过程。	0.2.0
resume	() => void	否		恢复 Typewriter 被打断的打字过程。	0.2.0
reset	() => void	否		重置 Typewriter 的打字内容。	0.2.0

TypewriterText

export type TypewriterText =
	| {
			type: 'type'
			text: string
	  }
	| {
			type: 'backspace'
			count: number
	  }
	| {
			type: 'delay'
			ms: number
	  }
	| {
			type: 'clear'
	  }
	| {
			type: 'setTypeColor'
			color: string
	  }
	| {
			type: 'setTypeClass'
			class: string
	  }