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