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

相关推荐
毕设源码-郭学长15 小时前
【开题答辩全过程】以 基于uni-app的维修上门服务小程序设计与实现为例,包含答辩的问题和答案
uni-app
xiaohe060115 小时前
📦 Uni ECharts 是如何使用定制 echarts 的?一篇文章轻松掌握!
vue.js·uni-app·echarts
Front思18 小时前
uniapp实现物流节点
uni-app
赵庆明老师20 小时前
uniapp 微信小程序页面JS模板
javascript·微信小程序·uni-app
熬耶20 小时前
uniapp 简单实现列表左滑操作
uni-app
小白学过的代码21 小时前
UniApp 引入 Cesium 开发: RenderJS 避坑
uni-app
jingling55521 小时前
uni-app 安卓端完美接入卫星地图:解决图层缺失与层级过高难题
android·前端·javascript·uni-app
2501_915918412 天前
iOS 开发中证书创建与管理中的常见问题
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张2 天前
IOScer 开发环境证书包括哪些,证书、描述文件与 App ID 的协同管理实践
android·ios·小程序·https·uni-app·iphone·webview
天府之绝2 天前
Uniapp App(Android)端 非媒体文件的选择、上传、下载、查看功能
uni-app