You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.9 KiB
102 lines
2.9 KiB
## uParse 适用于 uni-app/mpvue 的富文本解析组件 |
|
|
|
> 支持 Html、Markdown 解析，Fork自: [mpvue-wxParse](https://github.com/F-loat/mpvue-wxParse) |
|
|
|
|
|
## 属性 |
|
|
|
| 名称 | 类型 | 默认值 | 描述 | |
|
| -----------------|--------------- | ------------- | ---------------- | |
|
| loading | Boolean | false | 数据加载状态 | |
|
| className | String | — | 自定义 class 名称 | |
|
| content | String | — | 渲染内容 | |
|
| noData | String | 数据不能为空 | 空数据时的渲染展示 | |
|
| startHandler | Function | 见源码 | 自定义 parser 函数 | |
|
| endHandler | Function | null | 自定义 parser 函数 | |
|
| charsHandler | Function | null | 自定义 parser 函数 | |
|
| imageProp | Object | 见下文 | 图片相关参数 | |
|
|
|
### 自定义 parser 函数具体介绍 |
|
|
|
* 传入的参数为当前节点 `node` 对象及解析结果 `results` 对象，例如 `startHandler(node, results)` |
|
* 无需返回值，通过对传入的参数直接操作来完成需要的改动 |
|
* 自定义函数会在原解析函数处理之后执行 |
|
|
|
### imageProp 对象具体属性 |
|
|
|
| 名称 | 类型 | 默认值 | 描述 | |
|
| -----------------|--------------- | ------------- | ------------------ | |
|
| mode | String | 'aspectFit' | 图片裁剪、缩放的模式 | |
|
| padding | Number | 0 | 图片内边距 | |
|
| lazyLoad | Boolean | false | 图片懒加载 | |
|
| domain | String | '' | 图片服务域名 | |
|
|
|
## 事件 |
|
|
|
| 名称 | 参数 | 描述 | |
|
| -----------------|----------------- | ---------------- | |
|
| preview | 图片地址，原始事件 | 预览图片时触发 | |
|
| navigate | 链接地址，原始事件 | 点击链接时触发 | |
|
|
|
## 基本使用方法 |
|
|
|
|
|
``` vue |
|
<template> |
|
<div> |
|
<u-parse :content="article" @preview="preview" @navigate="navigate" /> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import uParse from '@/components/u-parse/u-parse.vue' |
|
|
|
export default { |
|
components: { |
|
uParse |
|
}, |
|
data () { |
|
return { |
|
article: '<div>我是HTML代码</div>' |
|
} |
|
}, |
|
methods: { |
|
preview(src, e) { |
|
// do something |
|
}, |
|
navigate(href, e) { |
|
// do something |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
@import url("@/components/u-parse/u-parse.css"); |
|
</style> |
|
``` |
|
|
|
|
|
## 渲染 Markdown |
|
|
|
> 先将 markdown 转换为 html 即可 |
|
|
|
``` |
|
npm install marked |
|
``` |
|
|
|
``` js |
|
import marked from 'marked' |
|
import uParse from '@/components/u-parse/u-parse.vue' |
|
|
|
export default { |
|
components: { |
|
uParse |
|
}, |
|
data () { |
|
return { |
|
article: marked(`#hello, markdown!`) |
|
} |
|
} |
|
} |
|
```
|
|
|