获取服务器返回的消息渲染到界面，实现打字效果

<script setup>
import { onMounted ,ref} from 'vue'
const message =ref('')
let str ='xxx......'
onMounted(() => {
  // 使用示例
  typeWriter('box', str, 100); // 在id为'typingArea'的元素中逐字显示'Hello, world!'，每字间隔150毫秒
})

function typeWriter(elementId, text, speed) {
  let index = 0;
  let intervalId;
  function type() {
    if (index < text.length) {
      // 在已有文本后添加下一个字符
      message.value += text.charAt(index);
      // 增加索引，指向下一个待显示的字符
      index++;
      // 如果已显示完所有字符，则清除定时器
      if (index === text.length) {
        clearInterval(intervalId);
      }
    }
  }
  // 开始打字效果
  intervalId = setInterval(type, speed);
}

</script>

<template>
  <p id="box">{{ message }}</p>
</template>