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

相关推荐
iOS阿玮14 小时前
鸿蒙激励的羊毛,你"薅"到了么?
uni-app·app·apple
ResponseState20017 小时前
安卓原生写uniapp插件手把手教学调试、打包、发布。
前端·uni-app
h_654321019 小时前
uniapp app端解析图片的经纬度、方位角
uni-app
h_654321019 小时前
uniapp app端获取指定路径下的所有图片
uni-app
雪芽蓝域zzs19 小时前
uniapp真机运行鸿蒙定位报getLocation:fail maybe not obtain GPS Permission
华为·uni-app·harmonyos
初遇你时动了情19 小时前
不用每个请求都写获取请求 类似无感刷新逻辑 uniapp vue3 react实现方案
javascript·react.js·uni-app
apollo_qwe2 天前
解决移动端键盘遮挡痛点
uni-app
脾气有点小暴2 天前
scroll-view分页加载
前端·javascript·uni-app
脾气有点小暴2 天前
uniapp自定义头部导航
前端·uni-app
前端 贾公子3 天前
[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
uni-app