vue3模拟AI逐字显示、复制粘贴功能

逐字显示

  getAiAnswer(); //获取state.aiText
  state.messages.push({
    imgs: state.fileList.map((item: any) => item.url),
    user: state.inputText,
    // ai: state.aiText,
    ai: "",
  });
  //逐字显示
  let i = 0;
  let timer = setInterval(() => {
    if (i < state.aiText.length) {
      state.messages[state.messages.length - 1].ai += state.aiText[i];
    //使用锚点定位到最新消息
    const endBox = document.querySelector(".end-box");
    if (endBox) {
      endBox.scrollIntoView();
    };
      i++;
    } else {
      clearInterval(timer);
    }
  }, 50);

复制到剪贴板功能，使用户能ctrl+v粘贴

import { useMessage } from "/@/hooks/web/useMessage";
import { useCopyToClipboard } from "/@/hooks/web/useCopyToClipboard";

const { createMessage } = useMessage();

// 复制
const onCopy = (text: string) => {
  const { isSuccessRef } = useCopyToClipboard(text);
  unref(isSuccessRef) && createMessage.success("复制成功");
};