chatgpt的打字机的效果实现

<template>
  <div class="content1">
    <div v-html="searchStr" class="content"></div>
    <el-input v-model="searchs" @blur="search"></el-input>
  </div>
</template>

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

import { marked } from "marked";
import Prism from "prismjs";
import hljs from "highlight.js";
import "highlight.js/styles/default.css"; // 选择你喜欢的样式
// import { log } from "console";
let searchs = ref("JavaScript写个拼图游戏");
let searchStr = ref();
let codeElement = ref(null);

onMounted(async () => {
  // await nextTick(); // 确保 DOM 更新完成
  getData(searchs.value);
});
/**
 * 
 * @param str 
 */
let getData = async (str) => {
  let res = await fetch(
    "你的后端的接口地址",
    {
      method: "POST",
      body: JSON.stringify("你后端的需要的参数"),
      headers: {
        "Content-Type": "application/json",
      },
    }
  );
  const reader = res.body.getReader();
  const decoder = new TextDecoder();
  let b: any = "";
  let readStream = () => {
    return reader.read().then(({ done, value }) => {
      if (done) {
        console.log("Stream finished");
        return;
      }
      const chunk: any = decoder.decode(value, { stream: true });
      console.log("Received chunk:", chunk);
      b = b + chunk;
      searchStr.value = marked(b);
      return readStream();
    });
  };
  readStream();
};

let search = (e) => {
  // console.log(e.target.value);
  getData(e.target.value);
};
</script>
<style>
.content1 {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* justify-content: center; */
}
* {
  padding: 0;
  margin: 0;
}
.content {
  height: 800px;
  width: 800px;

  /* color: palevioletred; */
  /* background: black; */
  overflow: auto;
}
pre {
  background: radial-gradient(circle, #000000, #151414) !important;
}
code[class*="language-"] {
  /* background-color: black !important; */
  color: #dbdfe3 !important;
}
</style>