Markdown 组件
框架使用Vditor作为 md 组件 简单封装
组件路径: packages/effects/common-ui/src/components/markdown
导入使用
ts
import { MarkdownPreviewer, MarkdownEditor } from "@vben/common-ui";MarkdownPreviewer
只用来预览 Markdown 内容
配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | - | 初始值, 支持双向绑定 |
| height | string, number | 500 | 高度 |
| options | object | - | 其他配置项 |
MarkdownEditor
用来编辑 Markdown 内容
配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | - | 初始值, 支持双向绑定 |
| height | string, number | 500 | 高度 |
| mode | string | 'wysiwyg' | 编辑模式 |
| id | string | - | 组件 id, 用于本地缓存内容 开启 cache 必传 |
| enableCache | boolean | false | 是否开启本地缓存 |
| options | object | - | 其他配置项 |
| disabled | boolean | false | 是否禁用编辑器 |
事件
MarkdownPreviewer 和 MarkdownEditor 都支持以下事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| mounted | 组件渲染完成时触发 | - |
由于Vditor默认采用 cdn 加载, 使用mounted事件可在加载完毕前进行 loading/skeleton 效果, 然后在加载完毕关闭 loading/skeleton 效果.