richtext

<richtext>是用于富文本格式数据转换的基础内容组件。

属性

属性名	类型	必填	说明
richData	Object	是	富文本数据，格式为：{message, rich_message}

richData.message

属性名	类型	必填	说明
message	String	是	文本内容

richData.rich_message

属性名	类型	必填	说明
rich_message	Array	是	富文本处理信息，rich_message[index]为对象

rich_message[index]

属性名	类型	必填	说明
start	Number	是	属性覆盖起始下标（0开始）
end	Number	是	属性覆盖结束下标
color	String	是	字体颜色
font_size	Number	是	字体大小，单位为cpx
font_family	String	否	字体名称，可选系统支持名称，否则降级为系统默认字体
font_style	String	否	字体样式，可选 italic \| normal，默认 normal
font_weight	String	否	文本粗细，可选 bold \| normal，默认 normal
text_decoration	String	否	文本修饰，可选 underline \| line-through \| none，默认 none
click	Boolean	否	是否增加事件监听，可选 true \| false ，默认 false
callback	Function	否	事件监听回调，建议使用箭头函数

示例

<template>
<view class="container">
  <richtext rich-data="{{richData}}"></richtext>
</view>
</template>
<script>
import cml from 'chameleon-api';
class Richtext {
  data = {
    richData: {
      message: '这是一段富文本',
      rich_message: [
        {
          "color": "#666666",
          "font_size": 28,
          "start": 0,
          "end": 3,
          "font_family": "sans",
          "font_weight": "normal",
          "click": false
        },
        {
          "color": "#fc9153",
          "font_size": 28,
          "start": 4,
          "end": 6,
          "font_family": "serif",
          "font_weight": "bold",
          "font_style": "normal",
          "text_decoration": "underline",
          "click": true,
          "callback": () => {
            this.methods.clickHandle()
          }
        }
      ]
    }
  }
  methods = {
    clickHandle() {
      cml.showToast({
        message: 'richtext click'
      })
    }
  }
}

export default new Richtext();
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
<script cml-type="json">
{
  "base": {}
}
</script>