功能:用户和ai对话,ai回复有打字机效果,一个字一个字加载(查看如何加载流式数据),并相对应的标签根据md格式渲染
接口:使用流式数据,返回
开源库:有很多开源库,这里我选择了v-md-editor
v-md-editor官网
引入(可以直接在main.js文件中引入)
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from "@kangc/v-md-editor/lib/theme/github.js"; //主题
import "@kangc/v-md-editor/lib/theme/style/github.css";
import hljs from "highlight.js"; //高亮代码VMdEditor.use(githubTheme, {Hljs: hljs,codeHighlightExtensionMap: {js: 'javascript', // 将 'js' 扩展名映射到 'javascript' 高亮模式html: 'html', // 将 'html' 扩展名映射到 'html' 高亮模式vue: 'xml',css: 'css',java: 'java',python: 'python',sql: 'sql',// 添加其他你需要的映射},
});
VMdEditor.use(createCopyCodePlugin());//代码复制
VMdEditor.use(createMermaidPlugin()); //mermaid格式渲染,但是这个功能一直没实现
Vue.use(VMdEditor);
使用(因为md格式大部分都是左右分栏,左边编辑,右边是预览模式,我这里的需求是只需要渲染,所以mode格式为preview)
<v-md-editorv-model="item.answer"mode="preview"@copy-code-success="handleCopyCodeSuccess"
/>