评论区的封装实现(富文本)

最新推荐文章于 2026-01-06 14:45:39 发布

原创

最新推荐文章于 2026-01-06 14:45:39 发布 · 423 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #HarmonyOS #javascript #评论

简介

在日常的生活中，我们在浏览视频，文章的时候，往往都会有评论的功能，然后这个也是在开发中比较常见的一个功能，在鸿蒙里面往往采用富文本来实现图文混排发表功能的效果，下面我们来看一下这个是如何实现的。

实现

实现思路

首先，评论区是一个组件或者弹框，这里我们使用的是一个封装好的组件，然后结合一个状态变量，来控制评论框组件的显隐。

其次，再发表评论的时候，我们可能会发表文字或者表情，亦或是图片，如果单独的使用Text组件,或者是Image组件显然是没有很好的实现这个效果，因此我们需要使用RichEditor(富文本)组件来实现图文的混排。

然后，我们需要准备好自己的表情，或者是使用系统自带的emoji表情也是可以的，主要是根据自己的业务和后端的字段来实现。接下来就是使用Stack和Grid布局来实现Emoji表情的排列，然后就是需要通过RichEditor的控制器来解析输入的内容，最后就是将内容解析成后端需要的字段进行提交，最后就是评论数据的渲染。

代码实现

效果

代码

import { Key } from '../constant/key'
import { inputMethod } from '@kit.IMEKit'

interface EmojiData {
  img: ResourceStr
}

@Entry
@Component
struct Index {
  @StorageProp(Key.topHEIGHT) topHeight: number = 0
  @State isShow: boolean = false

  build() {
    Column() {
      Button('点击发表评论')
        .onClick(() => {
          this.isShow = !this.isShow
          console.log('isShow', this.isShow)
        })
      if (this.isShow) {
        EmojiComment({ title: '请输入内容' })
          .position({ bottom: 0 }