Vue.jsでタイピング風テキストのオリジナルコンポーネントを作ってみた

CSSやjQuery等でよく表現されているて「テキストがタイピング風に表示される演出」を、
vue.jsで作りコンポーネントにしました。
VueTyperもあったのですが、これだと今回表現したかった演出が厳しく。。。
もちろん勉強も兼ねて。

TypingText.vue - 子コンポーネント（★今回のメイン）

TypingText.vue

<template>
  <p>
    {{ messageView }}
  </p>
</template>

<script>
export default {
  name: "TypingText",
  data() {
    return {
      siteTitle: "web_engineer_project",
      messageView: '',
      timer: null,
      count: 0
    };
  },
  props: {
    text: {
      type: String,
      required: true
    },
    speed: {
      type: Number,
      required: false,
      default: 100
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.messageView = this.text.substr(0, this.count);
      if (this.count > this.messageView.length) {
        console.log(this.$emit('callParent'))
        clearInterval(this.timer);
      }
      this.count++;
    }, this.speed);
  }
};
</script>

FirstLoader.vue - 親コンポーネント（★使い方例）

FirstLoader.vue

<template>
  <div class="first-loader">
    <typing-text
      :text="'vue create ' + siteTitle"
      :speed="80"
      v-if="typingTextShowFlg1"
      @callParent="typingTextShowBtn02"
    ></typing-text>

    <typing-text
      :text="'cd ' + siteTitle"
      :speed="80"
      v-if="typingTextShowFlg2"
      @callParent="typingTextShowBtn03"
    ></typing-text>


    <typing-text
      :text="'npm serve'"
      :speed="80"
      v-if="typingTextShowFlg3"
    ></typing-text>

  </div>
</template>

<script>
import TypingText from "./TypingText";
export default {
  name: "FirstLoader",
  components: { TypingText },
  data() {
    return {
      siteTitle: "web_engineer_project",
      typingTextShowFlg1: false,
      typingTextShowFlg2: false,
      typingTextShowFlg3: false,
    }
  },
  methods: {
    typingTextShowBtn01() {
      this.typingTextShowFlg1 = true
    },
    typingTextShowBtn02() {
      this.typingTextShowFlg2 = true
    },
    typingTextShowBtn03() {
      this.typingTextShowFlg3 = true
    }
  },
  mounted(){
    this.typingTextShowBtn01()
  }
};
</script>

demoサンプルは今後載せます。