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;

　這麼設置完富文本內的樣式後，咱們來看下效果。

看來效果不錯！