Vivid Typing

Vue 3 打字机 / 通知滚动（marquee）组件。

• Online Demo: https://vivid-typing.netlify.app/

Install

npm i vivid-typing
# or
pnpm add vivid-typing
# or
yarn add vivid-typing

Quick Start

import { createApp } from 'vue'
import { VividTyping } from 'vivid-typing'
import 'vivid-typing/dist/index.css'

import App from './App.vue'

const app = createApp(App)
app.component('VividTyping', VividTyping)
app.mount('#app')

Usage

<template>
  <vivid-typing content="Hi" :interval="80" />
</template>

更多示例：playground/src/App.vue

Props

Prop	Type	Default	Desc
content	string | string[]	''	渲染内容（字符串或数组）
interval	number	100	每个字符的间隔（ms）
delay	number	0	延迟多久开始（ms）
infinity	boolean	false	是否无限循环
infinityDelay	number	500	每轮结束后的等待（ms）
finish	() => void	-	播放完成回调（非 infinity 时）
stable	boolean	false	infinity 时每轮的清空/首帧策略（见示例）
tail	boolean	true	是否展示结尾闪烁效果
spiltTag	string	-	将文本以 spiltTag 包裹拆分（历史拼写：spilt）
spiltClass	string	-	拆分后 tag 的 class
spiltStyle	string | (index:number)=>string	-	拆分后 tag 的 style（支持按 index）
scrollX	boolean	false	横向滚动（注意外层 overflow:hidden）
scrollY	boolean	false	纵向滚动（注意外层 overflow:hidden）
speed	number	2	滚动速度
reverse	boolean	false	反向滚动

Feature

• 支持用 \\n 表示换行（例如 content="a\\nb"）
• 支持 <%> ... </%> 插入片段（例如插入 icon / HTML 片段）

<template>
  <vivid-typing
    :content="`Hi,<%><i class='emoji'></i></%>Simon\\nNice to meet you`"
    spilt-tag="span"
    spilt-class="animate-bounce"
    :interval="80"
  />
</template>

注意：组件内部使用 innerHTML 渲染，content 请不要来自不可信输入，否则可能产生 XSS 风险。

FAQ

如果遇到 Vue 重复实例导致的报错（例如 “Missing ref owner context”），可以在 vite.config.ts 添加 dedupe：

export default defineConfig({
  resolve: {
    dedupe: ['vue'],
  },
})