1# 添加留言区域 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @fenglinbailu--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9留言框的功能为：用户输入留言后点击完成，留言区域即显示留言内容。用户点击右侧的删除按钮可删除当前留言内容并重新输入。 10 11 12留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件（通过if属性控制）。在包含文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示例如下： 13 14 15```html 16<!-- xxx.hml --> 17<div class="container"> 18 <text class="comment-title">Comment</text> 19 <div if="{{!commentText}}"> 20 <input class="comment" value="{{inputValue}}" onchange="updateValue()"></input> 21 <text class="comment-key" onclick="update" focusable="true">Done</text> 22 </div> 23 <div if="{{commentText}}"> 24 <text class="comment-text" focusable="true">{{inputValue}}</text> 25 <text class="comment-key" onclick="update" focusable="true">Delete</text> 26 </div> 27</div> 28``` 29 30 31```css 32/* xxx.css */ 33.container { 34 margin-top: 24px; 35 background-color: #ffffff; 36} 37.comment-title { 38 font-size: 40px; 39 color: #1a1a1a; 40 font-weight: bold; 41 margin-top: 40px; 42 margin-bottom: 10px; 43} 44.comment { 45 width: 550px; 46 height: 100px; 47 background-color: lightgrey; 48} 49.comment-key { 50 width: 150px; 51 height: 100px; 52 margin-left: 20px; 53 font-size: 32px; 54 color: #1a1a1a; 55 font-weight: bold; 56} 57.comment-key:focus { 58 color: #007dff; 59} 60.comment-text { 61 width: 550px; 62 height: 100px; 63 text-align: left; 64 line-height: 35px; 65 font-size: 30px; 66 color: #000000; 67 border-bottom-color: #bcbcbc; 68 border-bottom-width: 0.5px; 69} 70``` 71 72 73```js 74// xxx.js 75export default { 76 data: { 77 inputValue: '', 78 commentText: false, 79 }, 80 update() { 81 this.commentText = !this.commentText; 82 }, 83 updateValue(e) { 84 this.inputValue = e.text; 85 }, 86} 87``` 88