JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<typer id="typer" v-bind:text="text"></typer>

JavaScript

Vue.component('typer', {
  props: ['text'],
  data () {
  	return {
    	typingText: '',
      count: 0,
      timer: null,
      isCursor: true
    }
  },
  template: `
  	<p>{{ typingText }}<span v-show="isCursor">|</span></p>
  `,
  mounted () {
  	let vm = this
    
    // cursor
    setInterval(() => {
    	vm.isCursor = !vm.isCursor
    }, 300)

		// typing
  	this.timer = setInterval(() => {
    	vm.typingText += vm.text[vm.count++]
      
      if(vm.text.length <= vm.count) {
        clearInterval(vm.timer)
      }
    }, 700)

  }
})
 
let typer = new Vue({
  el: '#typer',
  data: {
    text: 'hello~ my name is Seongkuk Park!'
  }
})