Uniapp 富文本组件 rich-text 使用教程 - 如何展示富文本内容

Uniapp 中可以使用 rich-text 组件来展示富文本内容。rich-text 组件可以解析 HTML 标签，并支持一部分 CSS 样式。以下是 rich-text 组件的使用示例：

<template>
  <view class='container'>
    <rich-text :nodes='nodes'></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        {
          name: 'div',
          attrs: {
            style: 'color: red; font-size: 24px;'
          },
          children: [
            {
              type: 'text',
              text: '这是一段红色的文字，字号为24px。'
            }
          ]
        },
        {
          name: 'ul',
          children: [
            {
              name: 'li',
              children: [
                {
                  type: 'text',
                  text: '列表项1'
                }
              ]
            },
            {
              name: 'li',
              children: [
                {
                  type: 'text',
                  text: '列表项2'
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

上述示例中，通过 nodes 属性传入了一个包含两个 div 和一个 ul 的数组。每个元素都是一个对象，对象中包含了该元素的标签名、属性和子元素。如果是文本节点，type 属性为 text，text 属性为文本内容。rich-text 组件会根据这些属性自动渲染出相应的元素。

需要注意的是，rich-text 组件只支持部分 CSS 样式，不支持所有 CSS 样式。具体支持的 CSS 样式可以参考 uniapp 官方文档。同时，由于 rich-text 组件是通过解析 HTML 标签实现的，因此需要注意 HTML 标签的使用。不恰当的 HTML 标签使用可能会导致渲染失败。