• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

鸿蒙OS 添加留言区域

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

留言框的功能为:用户输入留言后点击完成,留言区域即显示留言内容;用户点击右侧的删除按钮可删除当前留言内容重新输入。

留言区域由 div、text、input 关联 click 事件实现。开发者可以使用 input 组件实现输入留言的部分,使用 text 组件实现留言完成部分,使用 commentText 的状态标记此时显示的组件(通过 if 属性控制)。在包含文本“完成”和“删除”的 text 组件中关联 click 事件,更新 commentText 状态和 inputValue 的内容。具体的实现示例如下:

<!-- xxx.hml -->
<div class="container">
  <div class="left-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>
</div>

/* 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;
  },
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
鸿蒙OS 添加外部容器发布时间:2022-02-02
下一篇:
鸿蒙OS 添加图片区域发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap