TypewriterText 打字机文本
新粗野主义风格的打字机效果文本组件，逐字符显示文本并带有闪烁光标动画。适用于引导页、欢迎语、代码展示等场景。
预览
基础用法
循环播放
尺寸与粗细
无光标
安装
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>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text必填 | string | — | 逐字显示的完整文本内容。 |
详情声明类型string 默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
speed | number | undefined | 50 | 每显示一个字符之间的间隔时间，单位为毫秒。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
delay | number | undefined | 0 | 首次开始打字前等待的时间；循环模式下也作为每轮重新开始前的间隔。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
loop | boolean | undefined | false | 在文本显示完成后持续循环播放。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
cursor | boolean | undefined | true | 显示打字光标；非循环模式下文本完成后光标隐藏。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
size | "2xl" | "default" | "lg" | "sm" | "xl" | undefined | "default" | 设置打字文本的字号预设。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | "xl" | "2xl" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
weight | "black" | "bold" | "medium" | "normal" | undefined | "normal" | 设置打字文本的字重。 |
详情声明类型NonNullable<"medium" | "bold" | "normal" | "black" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
class | string | undefined | undefined | 追加到打字文本根元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/typewriter-text/TypewriterText.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@complete | [] | 一轮文本显示完成时发出；循环模式下每轮完成都会触发。 |
详情声明类型[] 来源packages/ui/src/components/typewriter-text/TypewriterText.vue | ||
@start | [] | 每轮打字动画开始时发出。 |
详情声明类型[] 来源packages/ui/src/components/typewriter-text/TypewriterText.vue | ||
可访问性
- 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 类，可用于自定义样式覆盖。