TypewriterText 打字机文本

新粗野主义风格的打字机效果文本组件，逐字符显示文本并带有闪烁光标动画。适用于引导页、欢迎语、代码展示等场景。

预览

Preview

基础用法

循环播放

尺寸与粗细

无光标

安装

pnpm dlx brutx-vue@latest add typewriter-text

用法

<script setup>
import { TypewriterText } from 'brutx-ui-vue'
</script>

<template>
    <TypewriterText
        text="欢迎使用 BrutxUI！"
        :speed="80"
        cursor
    />
</template>

循环播放

<template>
    <TypewriterText
        text="持续打字效果..."
        :speed="60"
        :delay="2000"
        loop
        cursor
    />
</template>

事件监听

<script setup>
import { TypewriterText } from 'brutx-ui-vue'

function onStart() {
    console.log('开始打字')
}

function onComplete() {
    console.log('打字完成')
}
</script>

<template>
    <TypewriterText
        text="打字完成后触发回调"
        :speed="80"
        @start="onStart"
        @complete="onComplete"
    />
</template>

变体

变体	CSS 类
normal	font-normal
medium	font-medium
bold	font-bold
black	font-black

尺寸

尺寸	CSS 类	光标高度
sm	text-sm	h-3
default	text-base	h-4
lg	text-lg	h-5
xl	text-xl	h-6
2xl	text-2xl	h-7

<template>
    <TypewriterText
        text="大号粗体文本"
        size="xl"
        weight="bold"
        :speed="100"
    />
</template>

Props

属性	类型	默认值	说明
text	string	—（必填）	要显示的文本
speed	number	50	打字速度（毫秒/字符）
delay	number	0	打字开始前的延迟时间（毫秒）。循环模式下也用作每次重启的间隔时间
loop	boolean	false	是否循环播放
cursor	boolean	true	是否显示光标。光标仅在打字进行中可见，非循环模式下打字完成后自动隐藏
size	'sm' | 'default' | 'lg' | 'xl' | '2xl'	'default'	文本尺寸
weight	'normal' | 'medium' | 'bold' | 'black'	'normal'	文本粗细
class	string	—	自定义类名

事件

事件	参数	说明
start	—	打字开始时触发
complete	—	打字完成时触发

可访问性

• ARIA 属性：组件使用 aria-live="polite" 确保屏幕阅读器能感知文本变化；光标使用 aria-hidden="true" 标记为装饰性元素
• 动效降级：当用户偏好 prefers-reduced-motion: reduce 时，直接显示完整文本，跳过动画；该偏好实时响应系统设置变化

常见问题

Q: text 属性变化时会怎样？

A: text 属性变化时会重新开始打字动画。

Q: 组件卸载时定时器如何处理？

A: 组件卸载时会自动清理所有定时器（包括打字定时器和延迟启动定时器），避免内存泄漏。

Q: 循环模式下的行为是什么？

A: 循环模式下，打字完成后会等待 delay 毫秒后重新开始。

Q: 如何自定义样式？

A: 组件根元素始终带有 brutx-typewriter CSS 类，可用于自定义样式覆盖。