# 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>
wx
web
native

# 注意

richtext 为 chameleon-sdk 扩展组件,在 weex-playground 中不会渲染,请用 chameleon-playground 扫描查看渲染结果。