uniapp 将数组中的文字实现[type:'bot',text:'士大夫士大夫士大夫士大夫']逐字打印效果

实现将数组中的文字 [type:'bot',text:'士大夫士大夫士大夫士大夫'] 逐字打印效果，可以使用计时器（setInterval）和字符串截取的方法。具体步骤如下：

1. 定义一个计时器变量和一个数组变量，用于存储要逐字打印的内容。

2. 在页面中创建一个空的 div 元素，用于动态显示逐字打印的内容。

3. 在页面加载完成后，遍历数组，将数组中所有的 text 字符串拼接起来，然后开启计时器，每隔一段时间（例如 100 毫秒）截取字符串的前几个字符，同时将它们添加到 div 元素中显示出来。

4. 当字符串的所有字符都被逐字打印出来后，关闭计时器。

下面是一个示例代码：

<template>
  <div class="print-container">
    <div class="print-content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      contents: [
        { type: 'bot', text: '士大夫士大夫士大夫士大夫' },
        { type: 'bot', text: 'Hello World!' }
      ],
      printedContent: ''
    }
  },
  mounted() {
    let str = ''
    this.contents.forEach(item => {
      if (item.type === 'bot') {
        str += item.text
      }
    })
    this.timer = setInterval(() => {
      if (str.length > 0) {
        this.printedContent += str.slice(0, 1)
        str = str.slice(1)
        this.$refs.printedContent.innerHTML = this.printedContent
      } else {
        clearInterval(this.timer)
      }
    }, 100)
  }
}
</script>

<style>
.print-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.print-content {
  font-size: 20px;
  color: #333;
  white-space: pre-wrap;
}
</style>

在这个示例代码中，我们定义了三个变量：timer（计时器）、contents（要逐字打印的内容）和 printedContent（已经被打印出来的内容）。在 mounted 钩子函数中，我们先遍历数组 contents，将所有 type 为 'bot' 的 text 字符串拼接起来。然后使用 setInterval 方法开启计时器，每隔 100 毫秒截取字符串的前一个字符，并将它们添加到 div 元素中显示出来。当字符串的所有字符都被逐字打印出来后，我们使用 clearInterval 方法关闭计时器。

需要注意的是，我们在 div 元素中使用了 white-space: pre-wrap 样式，这是为了保留字符串中的空格和换行符。