主题
Parse 富文本解析
解析 HTML 或 Markdown 内容,可通过 fui-parse-group 管理链接点击与图片预览。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | × | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 富文本分组 -->
<fui-parse-group @atap="handleLink" @preview="handlePreview">
<!-- HTML 内容 -->
<fui-parse :nodes="content" language="html" />
</fui-parse-group>在页面声明 content 和事件处理方法。渲染来自用户或外部系统的内容前,应在可信边界完成清理,并校验链接地址。
解析器属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| language | String | 内容类型:html、markdown 或 md | html |
| nodes | String / Array | HTML、Markdown 字符串或解析后的节点 | - |
分组属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| imgPreview | Boolean | 点击图片是否打开默认预览 | true |
| thBgcolor | Boolean | 表头是否使用默认背景色 | true |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| atap(分组) | 点击链接 | 链接地址 |
| preview(分组) | 点击图片 | { src, imageUrls } |
事件由 fui-parse-group 发出;本地源码即使启用默认预览也会触发 preview。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |