uniapp开发微信小程序遇到富文本内容大小变形问题v-html

uniapp开发微信小程序遇到富文本内容大小变形问题v-html

<view class="description"><view>论坛介绍</view><view class="html-content" v-html="forumDetailData.forumDescriptionCn"></view>
</view>

this.forumDetailData.forumDescriptionCn = this.forumDetailData.forumDescriptionCn// 1. px 转 rem.replace(/(\d+)px/g, (match, p1) => {return (p1 * 0.04) + 'rem';})// 2. 给 id="companyBox" 添加 margin 样式.replace(/<(\w+)([^>]*?)id=["']companyBox["']([^>]*?)>/gi, (match, tag, beforeId,afterId) => {let fullAttr = beforeId + afterId;if (/style\s*=\s*["'].*?["']/.test(fullAttr)) {return match.replace(/style=["'](.*?)["']/i, (styleMatch,styleContent) => {return `style="${styleContent} margin: 1rem 0;"`;});} else {return `<${tag}${beforeId}id="companyBox"${afterId} style="margin: 1rem 0;">`;}})// 3. 背景图处理，追加 background-size: 80%.replace(/style=["'](.*?)["']/gi, (match, styleContent) => {if (/background(-image)?:\s*url\(['"]?.*?['"]?\)/.test(styleContent)) {if (/background-size\s*:/.test(styleContent)) {return match; // 已有 background-size} else {return `style="${styleContent} background-size: 80%;"`;}}return match;})// 4. 给 <img> 添加样式，防止样式失效.replace(/<img /g,'<img style="max-width:100%;height:auto;display:block;margin-bottom:10rpx;" ');