1# richtext<a name="ZH-CN_TOPIC_0000001209412133"></a> 2 3富文本组件，用于展示富文本信息。 4 5> **说明：** 6>- 从 API Version 6 开始支持。 7>- 富文本内容需要写在元素标签内。 8 9## 权限列表<a name="zh-cn_topic_0000001173164701_section11257113618419"></a> 10 11无 12 13## 属性<a name="zh-cn_topic_0000001173164701_section2907183951110"></a> 14 15仅支持[通用属性](js-components-common-attributes.md)中的id、style和class属性。 16 17## 样式<a name="zh-cn_topic_0000001173164701_section5775351116"></a> 18 19仅支持[通用样式](js-components-common-styles.md)中的display和visibility样式。 20 21## 事件<a name="zh-cn_topic_0000001173164701_section17878123517511"></a> 22 23除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 24 25<a name="zh-cn_topic_0000001173164701_table13878203565113"></a> 26<table><thead align="left"><tr id="zh-cn_topic_0000001173164701_row18789355519"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164701_p08781335165113"><a name="zh-cn_topic_0000001173164701_p08781335165113"></a><a name="zh-cn_topic_0000001173164701_p08781335165113"></a>名称</p> 27</th> 28<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164701_p6878123595117"><a name="zh-cn_topic_0000001173164701_p6878123595117"></a><a name="zh-cn_topic_0000001173164701_p6878123595117"></a>参数</p> 29</th> 30<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164701_p28783359518"><a name="zh-cn_topic_0000001173164701_p28783359518"></a><a name="zh-cn_topic_0000001173164701_p28783359518"></a>描述</p> 31</th> 32</tr> 33</thead> 34<tbody><tr id="zh-cn_topic_0000001173164701_row2087803565116"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164701_p3878113518516"><a name="zh-cn_topic_0000001173164701_p3878113518516"></a><a name="zh-cn_topic_0000001173164701_p3878113518516"></a>start</p> 35</td> 36<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164701_p187813511516"><a name="zh-cn_topic_0000001173164701_p187813511516"></a><a name="zh-cn_topic_0000001173164701_p187813511516"></a>-</p> 37</td> 38<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164701_p1269067752"><a name="zh-cn_topic_0000001173164701_p1269067752"></a><a name="zh-cn_topic_0000001173164701_p1269067752"></a>开始加载时触发。</p> 39</td> 40</tr> 41<tr id="zh-cn_topic_0000001173164701_row28781235145111"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164701_p118810157518"><a name="zh-cn_topic_0000001173164701_p118810157518"></a><a name="zh-cn_topic_0000001173164701_p118810157518"></a>complete</p> 42</td> 43<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164701_p19878535135111"><a name="zh-cn_topic_0000001173164701_p19878535135111"></a><a name="zh-cn_topic_0000001173164701_p19878535135111"></a>-</p> 44</td> 45<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164701_p13878335145119"><a name="zh-cn_topic_0000001173164701_p13878335145119"></a><a name="zh-cn_topic_0000001173164701_p13878335145119"></a>加载完成时触发。</p> 46</td> 47</tr> 48</tbody> 49</table> 50 51> **说明：** 52>- 不支持focus、blur、key事件。 53>- 不支持无障碍事件。 54>- 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。 55>- richtext内容不建议超过一个屏幕高度，超出部分不会显示。 56 57## 方法<a name="zh-cn_topic_0000001173164701_section14703165113610"></a> 58 59不支持。 60 61## 示例<a name="zh-cn_topic_0000001173164701_section581819591666"></a> 62 63``` 64<!-- xxx.hml --> 65<div style="flex-direction: column;width: 100%;"> 66 <richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext> 67</div> 68``` 69 70``` 71// xxx.js 72export default { 73 data: { 74 content: ` 75 <div class="flex-direction: column; background-color: #ffffff; padding: 30px; margin-bottom: 30px;" style="background-color: #FFFFFF"> 76 <style>h1{color: yellow;}</style> 77 <p class="item-title">h1</p> 78 <h1>文本测试(h1测试)</h1> 79 <p class="item-title">h2</p> 80 <h2>文本测试(h2测试)</h2> 81 </div> 82 `, 83 }, 84 onLoadStart() { 85 console.error("start load rich text:" + JSON.stringify()) 86 }, 87 onLoadEnd() { 88 console.error("end load rich text:" + JSON.stringify()) 89 } 90} 91``` 92 93
