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

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

javascript 复制代码
<view class="description">
	<view>论坛介绍</view>
	<view class="html-content" v-html="forumDetailData.forumDescriptionCn"></view>
</view>
javascript 复制代码
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;" ');
相关推荐
2501_915921439 小时前
HTTPS 映射如何做?(HTTPS 映射配置、SNI 映射、TLS 终止、内网映射与 iOS 真机验证实战)
android·网络协议·ios·小程序·https·uni-app·iphone
睡不着的可乐9 小时前
uniapp 支付宝小程序 扩展组件 component 节点的class不生效
前端·微信小程序·支付宝
2501_9151063210 小时前
iOS 混淆与机器学习模型保护 在移动端保密权重与推理逻辑的实战指南(iOS 混淆、模型加密、ipa 加固)
android·人工智能·机器学习·ios·小程序·uni-app·iphone
2501_9159090610 小时前
iOS 26 耗电检测实战攻略,如何测电量掉速、定位高耗能模块与优化策略(适用于 uni-app 原生 App)
android·ios·小程序·uni-app·cocoa·iphone·webview
熙凝10 小时前
svg图标在react项目中的使用
html
2501_9159214310 小时前
iOS 26 性能测试实战,如何评估启动速度、CPUGPU 负载、帧率与系统资源适配(uni-app 与 iOS 原生应用性能方案)
android·ios·小程序·uni-app·cocoa·iphone·webview
Never_Satisfied12 小时前
在JavaScript / HTML中,让<audio>元素中的多个<source>标签连续播放
开发语言·javascript·html
Paddy哥12 小时前
html调起exe程序
前端·html
患得患失94912 小时前
【ThreeJs】【HTML载入】Three.js 中的 CSS2DRenderer 与 CSS3DRenderer 全面解析
javascript·html·css3
折翼的恶魔12 小时前
HTML基本标签二:
前端·html