uni-app富文本渲染的三种方案

目录

1.  渲染需求

2. rich-text, v-html 和插件解析的优缺点对比

3. 富文本解析插件的使用

4. 插件解析出来的效果图

---

1.  渲染需求

   渲染富文本当然是要把里面的样式渲染出来啦，但这只是最最最基础的，还要渲染的完美而不是千奇百怪，与此同时还要支持富文本中的链接跳转，图片预览，好啦，既然我们的目标已经知道了，那我们来分析一下常见的几种富文本解析方式以及优缺点吧

2. rich-text, v-html 和插件解析的优缺点对比

方式	优点	缺点	是否满足需求
rich-text （uniapp语法）	全端支持，高性能	只能对整体设点击事件，，无法对富文本中的图片，超链接单独设置点击事件	否
v-htmi （vue语法）		小程序不支持此语法	否
uv-parse	多端支持，vue3+2, app,h5,小程序	所花时间相对多一点，需要引入该插件	是

3. 富文本解析插件的使用

插件文档

选择安装包或者直接将插件写入项目如下

4. 在项目中使用

<uv-parse class="content-parse" :content="detailScript.content" :tagStyle="richStyle"  :selectable="true"></uv-parse> 
export default {
  data() {
    return { 
      richStyle: {
        span: 'width: 100%;word-wrap:break-word;word-break:break-all',
        p: 'width: 100%;word-wrap:break-word;word-break:break-all',
        blockquote: 'background: #f8f8f8; margin: 5px 0; padding: 5px 10px; border-left:2px solid #cbcbcb;'
      },
    }
  }
}

content为绑定的富文本字符串

tagStyle为绑定的标签样式

还能绑定点击跳转事件，对于里面的image点开也有预览效果

4. 插件解析出来的效果图