简介

富文本组件用于展示混合内容（文字、图片、HTML）。支持自定义样式、点击事件等特性，适用于需要展示复杂格式文本的场景。

使用方法

在页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-rich-text": "ava-ui/fxui/rich_text/index"
}

代码演示

---

API

属性

属性	说明	类型	默认值
nodes	富文本节点数组	array	[]
cStyle	容器自定义样式	string	''

nodes 节点数据结构

每个节点为一个对象，根据 type 字段区分类型：

文字节点 (type: 'string')：

属性	说明	类型
context	文字内容	string
color	文字颜色	string
fontSize	字体大小（px）	string
fontWeight	字重：bold / normal	string
textDecoration	文字装饰：underline / line-through	string
width	宽度（px）	string
height	高度（px）	string
onClick	点击回调	function

图片节点 (type: 'image')：

属性	说明	类型
context	图片地址（支持 HTTP URL 或 npath）	string
placeholder	占位图地址	string
width	宽度（px）	string
height	高度（px）	string
onClick	点击回调	function

HTML 节点 (type: 'html')：

属性	说明	类型
context	HTML 字符串	string

Events

事件名	说明	参数
linkTextTap	点击富文本节点时触发	{ nodeid: number }

---

使用示例

文字节点

data: {
  nodes: [{
    context: '红色加粗文字',
    color: 'red',
    fontWeight: 'bold',
    fontSize: '18',
    type: 'string',
    onClick() {
      wx.showToast({ title: '点击了文字', icon: 'none' });
    }
  }]
}

图片节点

data: {
  nodes: [{
    context: 'https://example.com/image.png',
    placeholder: 'https://example.com/placeholder.png',
    width: '60',
    height: '60',
    type: 'image',
    onClick() {
      wx.showToast({ title: '点击了图片', icon: 'none' });
    }
  }]
}

HTML 节点

data: {
  nodes: [{
    context: '<p style="color:#1989fa;">HTML 内容</p>',
    type: 'html'
  }]
}

---

打开预览