【Vue3+ElementPlus】打字机效果

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const lastItemRef = ref("")
// const messages = "# v-md-editor\n\nVue3 的 markdown 编辑器插件我推荐 [v-md-editor](http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D)，正是你看到的这个文本编辑器，我会将其保留着，方便自己使用。各位客官也可以随意编辑，反正刷新页面后内容就不存在了。"
const messages = [
  {
    "role": "system",
    "content": "假设你是一个有用的助手"
  },
  {
    "role": "user",
    "content": "markdown 例子1"
  },
  {
    "content": "# v-md-editor\n\nVue3 的 markdown 编辑器插件我推荐 [v-md-editor](http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D)，正是你看到的这个文本编辑器，我会将其保留着，方便自己使用。各位客官也可以随意编辑，反正刷新页面后内容就不存在了。",
    "role": "assistant"
  },
  {
    "role": "user",
    "content": "markdown 例子2"
  },
  {
    "role": "assistant",
    "content": "# title\n```python\nimport json\njson.dumps()\n```\n在 Vue3 中使用 `<script setup>` 实现 markdown-it 渲染 Markdown，你可以使用 `ref` 函数来创建一个响应式对象，然后在组件中使用 `computed` 属性来将 Markdown 转换成 HTML。"
  }
]

const isLastItem = computed(() => {
  return (index: number) => index === messages.length - 1;
})

// 当前字符的偏移量，即第 n 个字符
let offset = 0
let stopTime = 20

const itemTypeWriter = computed(() => {
  return (inputContent: String) => {
  // console.log("inputContent.length: " + inputContent.length)
  
  // 当前字符
  let c = ""

  // 定义一个打字机函数：每调用一次，就打印 1 个字符，从而实现逐字打印效果
  const typeWriter = () => {
    // console.log("offset2: " + offset)

    if (offset < inputContent.length) {
      c = inputContent.charAt(offset)
      // console.log(c)
      lastItemRef.value += c
      offset++
      // console.log("offset3: " + offset)

      if (c === ",") {
        stopTime = 500
      }
      if (c === "。" || c === "!" || c === "?") {
        stopTime = 1000
      }
      console.log(stopTime)

      // 自我递归调用
      setTimeout(typeWriter, stopTime)
    }
  }

  // 调用打字机函数
  setTimeout(typeWriter, stopTime)
  // console.log("outputConent: " + lastItemRef.value)
  return lastItemRef.value
}
})

</script>

<template>
  <el-row>
    <el-col :span="0"></el-col>
    <el-col :span="24">
      <el-card shadow="hover" v-for="message, index in messages" :key="index" style="border-radius: 0;">
        <v-md-editor v-if="!isLastItem(index)" :model-value="message.content" mode="preview"></v-md-editor>
        <v-md-editor v-if="isLastItem(index)" :model-value="itemTypeWriter(message.content)" mode="preview"></v-md-editor>
      </el-card>
    </el-col>
    <el-col :span="0"></el-col>
  </el-row>
</template>