ds-markdown-vue2

🚀 Vue2 Markdown 打字动画组件，提供现代 AI 聊天界面效果

一个专为 Vue2 设计的 Markdown 渲染组件，提供流畅的实时打字动画和完整的 Markdown 渲染能力。

特性

• 🤖 AI 对话就绪 - 专业的流式响应打字动画
• 📝 完整 Markdown 支持 - 代码高亮、表格、列表等
• 🔢 数学公式 - KaTeX 支持，$...$ 和 $$...$$ 语法
• 🎨 可定制 - 亮色/暗色主题，可配置打字速度
• ⚡ 高性能 - 轻量级，流畅动画
• 📦 Vue2 兼容 - 支持 Vue 2.6+

安装

npm install ds-markdown-vue2

快速开始

<template>
  <DsMarkdown 
    :content="markdown"
    :typing="true"
    :interval="30"
    theme="light"
  />
</template>

<script>
import DsMarkdown from 'ds-markdown-vue2';
import 'ds-markdown-vue2/es/style.css';

export default {
  components: { DsMarkdown },
  data() {
    return {
      markdown: '# Hello **World**\n\n这是一个测试。'
    };
  }
};
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | String | '' | Markdown 内容 | | typing | Boolean | false | 是否启用打字效果 | | interval | Number | 30 | 打字间隔 (ms) | | typingMode | String | 'char' | 打字模式: 'char' 或 'block' | | theme | String | 'light' | 主题: 'light' 或 'dark' | | answerType | String | 'answer' | 内容类型: 'answer' 或 'thinking' | | autoStart | Boolean | true | 是否自动开始打字 |

事件

| 事件 | 参数 | 说明 | |------|------|------| | start | { content } | 打字开始 | | end | { content } | 打字结束 | | typed-char | { char, position, total } | 每个字符打字完成 |

方法

通过 ref 调用组件方法：

this.$refs.markdown.start();   // 开始打字
this.$refs.markdown.stop();    // 暂停打字
this.$refs.markdown.resume();  // 继续打字
this.$refs.markdown.restart(); // 重新开始
this.$refs.markdown.complete(); // 立即完成

流式数据支持

组件自动检测内容追加，支持 AI 流式响应：

// 模拟流式数据
let content = '';
stream.on('data', (chunk) => {
  content += chunk;
  this.markdown = content; // 自动追加打字
});

数学公式

支持 KaTeX 语法：

行内公式：$E = mc^2$

块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

注意：需要安装 KaTeX 并引入样式：

npm install katex

import 'katex/dist/katex.min.css';

代码高亮

基于 highlight.js，引入主题样式：

import 'highlight.js/styles/vs2015.css';

主题

支持亮色和暗色主题：

<DsMarkdown :content="markdown" theme="dark" />

License

MIT