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>

使用后发现富文本显示确实能够改变

可是还有一个问题没有解决，就是图片之间有间距。

那么问题来了，这是什么致使的呢？

图片由于是行内元素，所以它基于基线垂直对齐。因此咱们须要设置图片样式是基于底线垂直对齐的。

vertical-align: bottom;

固然也可让图片不是行内元素来解决

display: block;

　这么设置完富文本内的样式后，咱们来看下效果。

看来效果不错！