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