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;" ');
相关推荐
iOS阿玮1 小时前
苹果市场常见的处罚邮件,最低处罚基本上听劝稳过。
uni-app·app·apple
xkxnq1 小时前
UniApp 基础开发第一步:HBuilderX 安装与环境配置
uni-app
xkxnq1 小时前
Uniapp 项目创建与目录结构解析
uni-app
赣州云智科技的技术铺子2 小时前
【一步步开发AI运动APP】十一、同时检测识别多人运动,分别进行运动计时计数
微信小程序·小程序·云开发·智能小程序
少油少盐不要辣7 小时前
uniapp小程序使用自定义底部tabbar,并根据用户类型动态切换tabbar数据
小程序·uni-app
GDAL14 小时前
Cesium入门教程(二)环境搭建(HTML版)
html·cesium
复苏季风18 小时前
UniApp 小白入门实战专栏①:从安装 HBuilderX 开始,3 步跑通第一个项目
前端·微信小程序·uni-app
雪芽蓝域zzs18 小时前
uniapp解析富文本,视频无法显示问题
uni-app·音视频
zhangbao90s1 天前
自定义高亮 API(Custom Highlight API)的使用方法
javascript·html
暖木生晖1 天前
css3背景线性渐变:linear-gradient
前端·html·css3