# richtext

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

web

native

# 属性

属性名	类型	必填	说明
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>

# 注意

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

← text page →