Skip to content

在线演示

下方是 vue-markdown-stream v2 的完整功能演示。点击「开始演示」观看流式输出效果——Markdown 内容会逐字渲染,:::alert:::card:::confirm:::progress:::datatable:::actions 等块会在出现时实时挂载为 Vue 组件。

点击「开始演示」查看流式渲染效果

示例语法

Alert 块

markdown
::: alert info
信息提示内容,支持 **Markdown** 语法。
:::

::: alert warning
注意:这是一条警告信息。
:::

Card 块

markdown
::: card 技术栈对比
| 方案 | 性能 | 体积 |
|------|------|------|
| h() + DOMParser | ✅ 优秀 | ✅ 轻量 |
:::

Confirm 块(v2 新增)

markdown
::: confirm action="delete_user" level=danger
确认要删除用户 **张三** 吗?此操作不可撤销。
:::

Progress 块(v2 新增)

markdown
::: progress value=73 max=100 status=active
正在导入数据... 已处理 73/100 条
:::

DataTable 块(v2 新增)

markdown
::: datatable sortable filterable
| 姓名 | 部门 | 状态 |
|------|------|------|
| 张三 | 研发 | 在线 |
| 李四 | 产品 | 离线 |
:::

Actions 块(v2 新增)

markdown
::: actions
- 查看处理进度
- 生成报告
- 导出数据
:::

Released under the MIT License.