vivid-typing

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

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'],
  },
})