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

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

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

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

/**
 * 富文本内容处理
*/
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)使用

相关推荐

  1. 程序定义组件

    2024-02-19 06:36:08       45 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-19 06:36:08       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-19 06:36:08       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-19 06:36:08       82 阅读
  4. Python语言-面向对象

    2024-02-19 06:36:08       91 阅读

热门阅读

  1. Leetcode 16-20题

    2024-02-19 06:36:08       57 阅读
  2. 【uniapp】自定义步骤条样式

    2024-02-19 06:36:08       44 阅读
  3. uni-app自定义tabbar(van-tabbar)

    2024-02-19 06:36:08       48 阅读
  4. AI趋势(06) Sora,AI对世界的新理解

    2024-02-19 06:36:08       50 阅读
  5. react 实现路由拦截

    2024-02-19 06:36:08       48 阅读
  6. 深入理解nginx的动态变量机制【上】

    2024-02-19 06:36:08       37 阅读
  7. golang 获取域名 ip dns 信息

    2024-02-19 06:36:08       53 阅读
  8. Redis分布式可重入锁实现方案

    2024-02-19 06:36:08       41 阅读
  9. 正则表达式的应用

    2024-02-19 06:36:08       40 阅读