<template><span>{{displayText.join('')}}<spanclass="cursor">|</span></span></template><script>exportdefault{props:{speed:{type:Number,default:100,},deleteSpeed:{type:Number,default:30,},nextWordInterval:{type:Number,default:1200},words:{type:Array,default:[],},},data(){return{displayText:[],currentWord:'',wordIdx:0,timeoutSpeed:null,isWaitingNextWord:false,}},mounted(){this.start()},methods:{start(){if(this.words&&this.words.length>0){this.currentWord=this.words[this.wordIdx].split('')this.timeoutSpeed=this.speedthis.animate=setTimeout(this.type,this.timeoutSpeed)}},type(){// if typing...if(this.currentWord.length>0){this.displayText.push(this.currentWord.shift())// if done typing, wait for a while}elseif(!this.isWaitingNextWord&&this.currentWord.length===0&&this.displayText.length===this.words[this.wordIdx].length){this.timeoutSpeed=this.nextWordIntervalthis.isWaitingNextWord=true// if done typing, then delete}elseif(this.currentWord.length===0&&this.displayText.length>0){this.timeoutSpeed=this.deleteSpeedthis.displayText.pop()// if done typing & deleting}elseif(this.currentWord.length===0&&this.displayText.length===0){// change wordsif(this.wordIdx<(this.words.length-1)){this.wordIdx++}else{// resetthis.wordIdx=0}this.timeoutSpeed=this.speedthis.isWaitingNextWord=falsethis.currentWord=this.words[this.wordIdx].split('')this.displayText.push(this.currentWord.shift())}setTimeout(this.type,this.timeoutSpeed)},},}</script><stylelang="scss"scoped>@keyframesblink-animation{to{visibility:hidden;}}.cursor{display:inline-block;margin-left:-3px;animation:blink-animation1ssteps(2,start)infinite;}</style>
This was a great addition, I'd also like to contribute some changes I've made.
I put all the main functionality of the loop into individual functions for better state management. I personally loved the addition of the cursor since it was exactly what I was looking for, but I had an issue with the look of the cursor. I wanted it to be exact to what's seen when you actually type. Ex: Typing, cursor is static, stop typing, cursor blinks.
Just some fixes and two features:
Thanks Theo! I've included your reply above as part of an update!
This was a great addition, I'd also like to contribute some changes I've made.
I put all the main functionality of the loop into individual functions for better state management. I personally loved the addition of the cursor since it was exactly what I was looking for, but I had an issue with the look of the cursor. I wanted it to be exact to what's seen when you actually type. Ex: Typing, cursor is static, stop typing, cursor blinks.