实现openAI流式打印效果 (包含markdown代码高亮及复制功能)

Todo_MrWu

已于 2023-11-29 18:08:04 修改

阅读量1.1k

点赞数 10

文章标签： javascript vue.js 前端

于 2023-11-23 12:02:02 首次发布

本文链接：https://blog.csdn.net/Todo_MrWu/article/details/134573744

版权

准备工作

// 插件
npm install markdown-it highlight.js

// 引入文件
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

初始化数据

data() {
    return {
        vHtml: '', // 最终填充展示的 html string
        vHtmlClassName: 'blink_params',
        index: 0, // 流式打印索引
        printInterval: null, // 流式打印定时器定义字段
        code: "当函数在其他函数内部定义时，该函数可以访问父函数中的所有变量，甚至包括外层函数中的变量。这种函数形成了闭包，因为它们捕获了父函数的变量。下面是一个JavaScript闭包的例子：\n\n```\nfunction outerFunction11111() {\n  var outerVariable = \"I'm a variable declared in outer function.\"\n\n  function innerFunction() {\n    console.log(outerVariable);\n  }\n\n  return innerFunction;\n}\n\nvar innerFunc = outerFunction();\ninnerFunc();\n```\n\n在这个例子中，内部函数`innerFunction`可以访问外部函数`outerFunction`的变量`outerVariable`，即便外部函数已经执行完毕并被销毁了。这是闭包的一种运用，它保留了一个函数的词法作用域，并且可以在其他代码中执行。\n\n在这个例子中，`outerFunction`返回`innerFunction`，并且被赋值给`innerFunc`变量。当`innerFunc`被调用时，它输出“`I'm a variable declared in outer function`”，因为它可以访问`outerVariable`，即它所在的闭包。小盘：当函数在其他函数内部定义时，该函数可以访问父函数中的所有变量，甚至包括外层函数中的变量。这种函数形成了闭包，因为它们捕获了父函数的变量。下面是一个JavaScript闭包的例子：\n\n```\nfunction outerFunction22222() {\n  var outerVar