vue3打字机效果

复制代码
<template>
  <div>
    <p>{{ text }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const text = ref(""); // 要显示的文字
const speed = 100; // 打字速度,单位:毫秒
let index = 0;
const originalText =
  "前端可以使用axios库来处理eventStream数据。axios提供了一个**request**方法来发送HTTP请求,并且可以通过配置参数来处理不同类型的请求。";

const typeWriter = () => {
  if (index < originalText.length) {
    text.value += originalText.charAt(index);
    index++;
    setTimeout(typeWriter, speed);
  }
};

onMounted(() => {
  typeWriter(); // 调用打字机函数
});
</script>

<style lang="scss" scoped>
</style>
复制代码

 

posted @   xuanPhoto  阅读(432)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示