mpvue-wxParse 是适用于Mpvue的微信小程序富文本解析组件,支持 HTML
及 markdown
解析。
- 安装
npm install mpvue-wxparse
- 使用
1. HTML
<template>
<div>
<wxParse :content="article" @preview="preview" @navigate="navigate" />
</div>
</template>
2. JS
<script>
import wxParse from 'mpvue-wxparse'
export default {
components: {
wxParse
},
data () {
return {
article: '<div>CSDN: mossbaoo</div>'
}
},
methods: {
preview(src, e) {
// preview事件
},
navigate(href, e) {
// navigate事件
}
}
}
</script>
3. CSS (wxParse的默认样式,可选用)
<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>
另外,mpvue-wxParse还可以解析markdown
- 安装
npm install marked
- 使用(原理是先将markdown转换成html,再用wxParse解析)
import marked from 'marked'
import wxParse from 'mpvue-wxparse'
export default {
components: {
wxParse
},
data () {
return {
article: marked(`#hello, markdown!`)
}
}
}