新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)鴻蒙OS教程:鴻蒙OS添加留言區(qū)域
留言框的功能為:用戶輸入留言后點擊完成,留言區(qū)域即顯示留言內(nèi)容;用戶點擊右側(cè)的刪除按鈕可刪除當(dāng)前留言內(nèi)容重新輸入。

留言區(qū)域由 div、text、input 關(guān)聯(lián) click 事件實現(xiàn)。開發(fā)者可以使用 input 組件實現(xiàn)輸入留言的部分,使用 text 組件實現(xiàn)留言完成部分,使用 commentText 的狀態(tài)標記此時顯示的組件(通過 if 屬性控制)。在包含文本“完成”和“刪除”的 text 組件中關(guān)聯(lián) click 事件,更新 commentText 狀態(tài)和 inputValue 的內(nèi)容。具體的實現(xiàn)示例如下:
Comment
Done
{{inputValue}}
Delete
/* xxx.css */
.container {
margin-top: 24px;
background-color: #ffffff;
}
.left-container {
flex-direction: column;
margin-left: 48px;
width: 460px;
}
.comment-title {
font-size: 24px;
color: #1a1a1a;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
}
.comment-key {
width: 74px;
height: 50px;
margin-left: 10px;
font-size: 20px;
color: #1a1a1a;
font-weight: bold;
}
.comment-key:focus {
color: #007dff;
}
.comment-text {
width: 386px;
height: 50px;
text-align: left;
line-height: 35px;
font-size: 20px;
color: #000000;
border-bottom-color: #bcbcbc;
border-bottom-width: 0.5px;
}
.comment {
width: 386px;
height: 50px;
background-color: lightgrey;
}
// xxx.js
export default {
data: {
inputValue: '',
commentText: false,
},
update() {
this.commentText = !this.commentText;
},
updateValue(e) {
this.inputValue = e.text;
},
} 網(wǎng)頁名稱:創(chuàng)新互聯(lián)鴻蒙OS教程:鴻蒙OS添加留言區(qū)域
文章分享:http://m.fisionsoft.com.cn/article/ccdopoe.html


咨詢
建站咨詢
