要在 Vue 3 中实现请求成功后的类似打字效果输出,您可以使用 axios 或其他适合您的方法来发起异步请求。在请求成功后,您可以将返回的文本存储在响应式对象中,并使用一段时间间隔逐个字符地将文本输出到界面上。下面是一个示例代码:
<template>
<div>{{ typedText }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
data() {
return {
url: '', // 替换为您的请求 URL
delay: 100, // 延迟时间
typedText: '',
};
},
mounted() {
this.fetchText();
},
methods: {
fetchText() {
axios.get(this.url)
.then(response => {
const text = response.data;
this.typeEffect(text);
})
.catch(error => {
console.error('请求出错:', error);
});
},
typeEffect(text) {
let index = 0;
const intervalId = setInterval(() => {
if (index >= text.length) {
clearInterval(intervalId);
return;
}
this.typedText += text.charAt(index);
index++;
}, this.delay);
},
},
};
</script>
上述示例代码中,在 mounted 钩子函数中,调用 fetchText 方法来发起请求并获取文本数据。在请求成功后,调用 typeEffect 方法来逐个字符地输出文本。
请将 url 替换为您实际发起请求的 URL,并根据需要调整 delay 延迟时间。
请注意,示例中使用了 axios 发起异步请求,您需要根据您的项目需求来选择合适的 AJAX 库或方法。此外,这个示例假设请求返回的数据是一个字符串文本,如果返回的是其他类型的数据,请根据实际情况进行相应调整。
在模板中,我们使用插值绑定 {{ typedText }} 来显示正在打印的字符串。
请注意,这个示例使用了 Vue 3 的 Composition API,需要确保你的项目已经升级到 Vue 3,并按照上述示例添加代码。