uniapp rich-text 富文本组件在微信小程序中自定义内部元素样式

rich-text 富文本组件在微信小程序中,无法直接通过外部css样式控制文章内容样式。

解决方案:将传入的富文本内容截取并添加自定义样式类名

(1)全局配置filter方法,实现富文本内容截取转换,附上'rich-txt-p'样式类

javascript 复制代码
/**
 * 富文本内容处理
*/
export function richTxtFilter(content) {
	if (!content) return ''
	let val
	val = content.replace(/\<p/gi, '<p class="rich-txt-p" ');
	return val
}

(2)在app.vue中编辑'rich-txt-p'内容,即富文本需要自定义的样式。

注:需要用 ::v-deep 深度绑定

(3)使用

相关推荐
海天胜景3 小时前
uniapp 字符包含的相关方法
uni-app
moxiaoran57536 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
moxiaoran57537 小时前
uni-app学习笔记二十九--数据缓存
笔记·学习·uni-app
moxiaoran575312 小时前
uni-app学习笔记三十--request网络请求传参
笔记·学习·uni-app
疯狂的沙粒14 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
anyup17 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
alphaair1 天前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran57531 天前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem1 天前
从零搭建uniapp项目
前端·vue.js·uni-app
Bug从此不上门2 天前
【无标题】
前端·javascript·uni-app·vue