【vue】仿chatGPT逐个打字效果

<template>
  <div class="chat">
    <div class="chat-bubble" v-for="(message, index) in messages" :key="index">
      <div>{
  { message.content }}</div>
      <span v-if="showTyping && index === messages.length - 1">{
  { typing }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Chat',
  data() {
    return {
      messages: [],
      typing: '',
      showTyping: false,
      intervalId: null
    }
  },
  created() {
    this.addMessage({
      content: 
      `
      为什么如此？因为在青春时代，生活充满了奇特而辛酸的不可思议的事。
      Why is this so? Because in youth, life is filled with strange and poignant incredible things.
      `
    })
  },
  methods: {
    addMessage(message) {
      this.messages.push({ ...message, content: '' })

      let i = 0
      const msgLen