uniapp 逐字打印效果实现

实现逐字打印效果，可以使用计时器（setInterval）和字符串截取的方法。具体步骤如下：

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

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

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

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

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      timer: null,
      content: 'Hello World!',
      printedContent: ''
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.content.length > 0) {
        this.printedContent += this.content.slice(0, 1)
        this.content = this.content.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（计时器）、content（要逐字打印的内容）和 printedContent（已经被打印出来的内容）。在 mounted 钩子函数中，我们使用 setInterval 方法开启了计时器，每隔 100 毫秒截取字符串的前一个字符，并将它们添加到 div 元素中显示出来。当字符串的所有字符都被逐字打印出来后，我们使用 clearInterval 方法关闭计时器。

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