Vue3实现打字机效果-实战

本文将详细介绍如何使用Vue3实现一个功能完备

<template><divclass="typewriter":style="fontsConStyle"><span v-for="(char, index) in displayedText":key="index">{{char}}</span><span v-if="blinkCursor":class="{ 'cursor-blink': isTypingComplete }"class="cursor">|</span></div></template><script setup>import{ref,onMounted,onBeforeUnmount}from"vue";constprops=defineProps({text:String,speed:{type:Number,default:50},blinkCursor:{type:Boolean,default:true},fontsConStyle:{type:Object,default:()=>({fontSize:"4rem",}),},});constdisplayedText=ref("");constisTypingComplete=ref(false);letintervalId=null;onMounted(()=>{leti=0;intervalId=setInterval(()=>{if(i<=props.text.length){displayedText.value=props.text.substring(0,i);i++;}else{clearInterval(intervalId);isTypingComplete.value=true;}},props.speed);});onBeforeUnmount(()=>{if(intervalId)clearInterval(intervalId);});</script><style scoped>.cursor{display:inline-block;width:2px;height:1em;}.cursor-blink{animation:blink 1s infinite;}@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}</style>

使用

<typewriter text="你好，我是程序员小马"/>