ce4c83ff
 wxy
初始提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
# mpvue-wxParse 适用于 Mpvue 的微信小程序富文本解析组件
> 支持 Html、Markdown 转 Wxml 可视化，修改自: [wxParse](https://github.com/icindy/wxParse)
[](https://npmjs.org/package/mpvue-wxparse)
[](https://npmjs.org/package/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 | 链接地址，原始事件 | 点击链接时触发 |
## 基本使用方法
* 安装
``` bash
npm i mpvue-wxparse
```
* 使用
``` vue
<template>
<div>
<wxParse :content="article" @preview="preview" @navigate="navigate" />
</div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
export default {
components: {
wxParse
},
data () {
return {
article: '<div>我是HTML代码</div>'
}
},
methods: {
preview(src, e) {
// do something
},
navigate(href, e) {
// do something
}
}
}
</script>
<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>
```
## 渲染 Markdown
> 先将 markdown 转换为 html 即可
``` bash
npm install marked
```
``` js
import marked from 'marked'
import wxParse from 'mpvue-wxparse'
export default {
components: {
wxParse
},
data () {
return {
article: marked(`#hello, markdown!`)
}
}
}
```
## Tips
* v0.6 之后的版本样式文件需自行引入
* 打包时出错 `ERROR in static/js/vendor.js from UglifyJs`
参照以下配置使 babel 处理 mpvue-wxparse，或更新 UglifyJs 插件
``` js
// webpack.base.conf.js
{
test: /\.js$/,
include: [resolve('src'), /mpvue-wxparse/],
use: [
'babel-loader',
{
loader: 'mpvue-loader',
options: {
checkMPEntry: true
}
}
]
}
```
## 感谢
[@stonewen](https://github.com/stonewen)| [@Daissmentii](https://github.com/Daissmentii) | [@wuyanwen](https://github.com/wuyanwen) | [@vcxiaohan](https://github.com/vcxiaohan)
|
