mpvue自定义化后台富文本样式

最近公司写小程序开始换框架了，之前用wepy，现在用mpvue。

mpvue是基于vue的写法来开发微信小程序。虽然不完全和vue一样，但是大致和vue一样，所以基本开发上是上手很快的。

现在项目进程到前后端联调，后端的富文本字段并不能自定义内部样式，因此需要前端在显示的时候做一些调整。

现在就展示下一开始没调整样式的样子。

可以看出有两个问题一个是图片之间有间距，另一个则是图片并超框了。

既然发现了问题，就开始介绍解决方法吧----mpvue-wxparse

1. npm i mpvue-wxparse

2. 使用方法

<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>