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)使用

相关推荐
2501_91592143几秒前
iPhone HTTPS 抓包在真机环境下面临的常见问题
android·ios·小程序·https·uni-app·iphone·webview
未寒12 分钟前
关于uni app vue2 和vue3 的区别
前端·javascript·vue.js·uni-app
snow@li36 分钟前
小程序-uniapp:vue3-typescript项目使用mp-html实现展示富文本
javascript·typescript·uni-app
2501_915918411 小时前
iOS 图片资源保护方法,分析图片在二次打包和资源篡改中的实际风险
android·ios·小程序·https·uni-app·iphone·webview
几度风雨见丹心1 小时前
uniapp项目使用sqlite数据库
数据库·sqlite·uni-app
全栈软件开发1 小时前
Fidelity充电桩投资理财系统源码-前端uniapp纯源码+后端PHP
前端·uni-app·php
2501_916008892 小时前
iPhone 耗电异常检测的思路,从系统电池统计、克魔(KeyMob)、Instruments等工具出发
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_915921432 小时前
App Store 上架流程中常见的关键问题
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张12 小时前
python 抓包在实际项目中的合理位置,结合代理抓包、设备侧抓包与数据流分析
android·ios·小程序·https·uni-app·iphone·webview
吴汉三16 小时前
iOS 和 HarmonyOS 兼容笔记
uni-app