当前位置：首页 > news >正文

vue3 打字机效果

news 来源：原创 2025/5/1 6:33:49

打字机效果

因后端返回的数据也是通过@microsoft/fetch-event-source 一句一句流式返回但是前端展示效果想要实现打字机效果

代码如下

<template><div><div class="text-container"><span class="text-content">{{ displayText }}</span><span :class="{ cursor: isTyping }"></span></div></div>
</template><script setup>import {ref,onMounted} from 'vue';const displayText = ref('')const isTyping = ref(false)const queue = ref([])// onMounted(() => {// 	mockStreamData(); // 示例中调用模拟数据流// })// 将新句子加入队列并触发处理const addSentence = (sentence) => {console.log(sentence, 'sentence');queue.value.push(sentence);if (!isTyping.value) {processQueue();}}// 处理队列中的句子const processQueue = async () => {isTyping.value = true;while (queue.value.length > 0) {const sentence = queue.value.shift();await typeText(sentence);}isTyping.value = false;}// 逐字显示句子const typeText = async (sentence) => {const chars = sentence.split("");for (const char of chars) {await delay(60); // 调整字符显示速度displayText.value += char;}displayText.value += " "; // 句子间添加空格}// 延迟函数const delay = (ms) => {return new Promise((resolve) => setTimeout(resolve, ms));}// 模拟接收流式数据（示例方法，需根据实际数据源调整）const mockStreamData = async () => {const sentences = ["Hello, world!", "This is a", " typing effect."];for (const sentence of sentences) {addSentence(sentence);await delay(1000); // 模拟分块到达间隔}}defineExpose({addSentence})
</script><style>.text-container {font-family: monospace;font-size: 18px;min-height: 1em; }.cursor {display: inline-block;width: 2px;height: 1em;background: black;margin-left: 2px;animation: blink 1s step-end infinite;}@keyframes blink {from,to {opacity: 0;}50% {opacity: 1;}}
</style>