103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
## 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!`)
|
||
}
|
||
}
|
||
}
|
||
```
|