支持 Html、Markdown 转 Wxml 可视化,修改自: wxParse
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
loading | Boolean | false | 数据加载状态 |
className | String | — | 自定义 class 名称 |
content | String | — | 渲染内容 |
noData | String | 数据不能为空 | 空数据时的渲染展示 |
startHandler | Function | 见源码 | 自定义 parser 函数 |
endHandler | Function | null | 自定义 parser 函数 |
charsHandler | Function | null | 自定义 parser 函数 |
imageProp | Object | 见下文 | 图片相关参数 |
- 传入的参数为当前节点
node
对象及解析结果results
对象,例如startHandler(node, results)
- 无需返回值,通过对传入的参数直接操作来完成需要的改动
- 自定义函数会在原解析函数处理之后执行
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
mode | String | 'aspectFit' | 图片裁剪、缩放的模式 |
padding | Number | 0 | 图片内边距 |
lazyLoad | Boolean | false | 图片懒加载 |
domain | String | '' | 图片服务域名 |
名称 | 参数 | 描述 |
---|---|---|
preview | 图片地址,原始事件 | 预览图片时触发 |
navigate | 链接地址,原始事件 | 点击链接时触发 |
- 安装
npm i mpvue-wxparse
- 使用
<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 转换为 html 即可
npm install marked
import marked from 'marked'
import wxParse from 'mpvue-wxparse'
export default {
components: {
wxParse
},
data () {
return {
article: marked(`#hello, markdown!`)
}
}
}
-
v0.6 之后的版本样式文件需自行引入
-
打包时出错
ERROR in static/js/vendor.js from UglifyJs
参照以下配置使 babel 处理 mpvue-wxparse,或更新 UglifyJs 插件
// webpack.base.conf.js
{
test: /\.js$/,
include: [resolve('src'), /mpvue-wxparse/],
use: [
'babel-loader',
{
loader: 'mpvue-loader',
options: {
checkMPEntry: true
}
}
]
}