#鸿蒙通关秘籍#实现鸿蒙留言区域功能的最佳实践?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Y影刃SQL

留言功能可以通过组合div、text、input组件以及关联click事件来实现。input组件用于输入留言,text组件用于完成留言显示,commentText状态用作显示控制。同时关联click事件以切换commentText状态,并更新inputValue内容。以下是具体实现代码:

html <div class="container"> <text class="comment-title">Comment</text> <div if="{{!commentText}}"> <input class="comment" value="`inputValue`" onchange="updateValue()"></input> <text class="comment-key" onclick="update" focusable="true">Done</text> </div> <div if="`commentText`"> <text class="comment-text" focusable="true">`inputValue`</text> <text class="comment-key" onclick="update" focusable="true">Delete</text> </div> </div>

css .container { margin-top: 24px; background-color: #ffffff; } .comment-title { font-size: 40px; color: #1a1a1a; font-weight: bold; margin-top: 40px; margin-bottom: 10px; } .comment { width: 550px; height: 100px; background-color: lightgrey; } .comment-key { width: 150px; height: 100px; margin-left: 20px; font-size: 32px; color: #1a1a1a; font-weight: bold; } .comment-key:focus { color: #007dff; } .comment-text { width: 550px; height: 100px; text-align: left; line-height: 35px; font-size: 30px; color: #000000; border-bottom-color: #bcbcbc; border-bottom-width: 0.5px; }

javascript export default { data: { inputValue: '', commentText: false, }, update() { this.commentText = !this.commentText; }, updateValue(e) { this.inputValue = e.text; }, }


分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS jsBridge 最佳实践
255浏览 • 1回复 待解决
网络监听最佳实践有哪些?
431浏览 • 1回复 待解决
应用内整体换肤最佳实践
430浏览 • 1回复 待解决
HarmonyOS 沉浸式状态栏最佳实践
286浏览 • 1回复 待解决
输出静态库最佳实践
208浏览 • 1回复 待解决
web写入customUseragent最佳实践
230浏览 • 1回复 待解决
HarmonyOS 单列和瀑布流最佳实践
232浏览 • 1回复 待解决
APP内整体置灰最佳实践
260浏览 • 1回复 待解决