前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
• 微信小程序中預(yù)覽的圖片溢出效果（非期望效果）
  
• 期望的效果
  

分析

rich-text 為已封裝好的組件。向 rich-text傳遞參數(shù)后，由 rich-text進(jìn)行展現(xiàn)（<rich-text :nodes="content|formatRichText"></rich-text>），目前未向開發(fā)者提供控制 rich-text展現(xiàn)的內(nèi)容樣式的方法。

代碼1：圖片溢出的代碼（對應(yīng)圖片溢出效果）：

<img style="margin: 0px auto; padding: 0px; display: block; max-width: 800px;" src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />

代碼2：圖片不溢出的代碼（對應(yīng)期望的效果）：

<img style="max-width:100%;height:auto;display:block;margin:0px auto;" src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />

要解決圖片溢出，只需要找到將代碼1轉(zhuǎn)化為代碼2的方法即可。

方法

根據(jù)前面的思路，目前有2個方法:

nodes 為 String 類型時，用 replace 方法修改樣式。

nodes 為 Array 類型時，遍歷Array并修改節(jié)點屬性（找到樣式節(jié)點，并進(jìn)行修改）。

因為支付寶小程序只支持nodes 為 Array 類型的使用方法，所以，方法2更通用一些，可以參考這里。
關(guān)于方法1的介紹，可以參考這里。下面介紹一下方法1。

另，下面這樣的方法，在H5中有效：

/* 在H5 rich-text 控件會被翻譯為 uni-rich-text */uni-rich-text img {max-width: 100% !important;}

操作

1. 先編寫修改樣式的方法

export default {components: {},data() {return {}},onReady() {},methods: {/*** 處理富文本里的圖片寬度自適應(yīng)* 1.去掉img標(biāo)簽里的style、width、height屬性* 2.修改所有style里的width屬性為max-width:100%* 3.img標(biāo)簽添加style屬性：max-width:100%;height:auto* 4.去掉<br/>標(biāo)簽* @param html* @return string*/formatRichText (html) {// 去掉img標(biāo)簽里的style、width、height屬性let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});// 修改所有style里的width屬性為max-width:100%newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');return match;});// 去掉<br/>標(biāo)簽newContent = newContent.replace(/<br[^>]*\/>/gi, '');// img標(biāo)簽添加style屬性：max-width:100%;height:autonewContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');return newContent;}}}

2.修改樣式的方法

<rich-text :nodes="formatRichText(content)"></rich-text>

3.改進(jìn)

可以封裝成js庫，方便以后使用。

richTextUtil.js

/*** 處理富文本里的圖片寬度自適應(yīng)* 1.去掉img標(biāo)簽里的style、width、height屬性* 2.修改所有style里的width屬性為max-width:100%* 3.img標(biāo)簽添加style屬性：max-width:100%;height:auto* 4.去掉<br/>標(biāo)簽* @param html* @return string*/ function formatRichText (html) {// 去掉img標(biāo)簽里的style、width、height屬性let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});// 修改所有style里的width屬性為max-width:100%newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');return match;});// 去掉<br/>標(biāo)簽newContent = newContent.replace(/<br[^>]*\/>/gi, '');// img標(biāo)簽添加style屬性：max-width:100%;height:autonewContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');return newContent; }export default {formatRichText, };

引入js庫

import richTextUtil from '@/common/richTextUtil.js';

調(diào)用方法

this.content = richTextUtil.formatRichText(res.content);

rich-text：

<rich-text :nodes="content"></rich-text>

參考

https://blog.csdn.net/qq_37682202/article/details/100522172
https://www.jb51.net/article/154976.htm
https://www.jianshu.com/p/b87a0ff0f5b4

總結(jié)

以上是生活随笔為你收集整理的【uni-app】 rich-text 中图片溢出的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。