ChatGPT Type Effect

一个模仿 ChatGPT 打字效果的组件，可以同时用于 Vue 和 React 项目。

特性

• 支持 Vue 3 和 React
• 可自定义打字速度
• 支持 HTML 内容
• 打字完成回调
• 可自定义光标样式

安装

npm install chatgpt-type-effect

使用

Vue

<template>
	<TypeEffect
		text="Hello, this is a typing effect like ChatGPT!"
		:speed="30"
		:showCursor="true"
		@typing-done="onTypingDone"
	/>
</template>

<script>
import { TypeEffect } from 'chatgpt-type-effect/vue'

export default {
	components: {
		TypeEffect,
	},
	methods: {
		onTypingDone() {
			console.log('Typing completed!')
		},
	},
}
</script>

React

import React from 'react'
import TypeEffect from 'chatgpt-type-effect/react'

const App = () => {
	const handleTypingDone = () => {
		console.log('Typing completed!')
	}

	return (
		<TypeEffect
			text="Hello, this is a typing effect like ChatGPT!"
			speed={30}
			showCursor={true}
			onTypingDone={handleTypingDone}
		/>
	)
}

export default App

属性

| 属性 | 类型 | 默认值 | 描述 | | ---------- | ------- | ------ | ------------------------ | | text | string | 必填 | 要显示的文本内容 | | speed | number | 30 | 打字速度，单位为毫秒 | | startDelay | number | 0 | 开始打字前的延迟（毫秒） | | showCursor | boolean | true | 是否显示光标 | | html | boolean | false | 是否将文本解析为 HTML |

事件

Vue

• typing-done : 打字完成时触发

React

• onTypingDone : 打字完成时触发的回调函数

许可证

MIT