t-comment

Comment 评论列表组件 — 基于 list-view 实现的层级评论展示组件，支持递归回复、点赞、用户点击等交互。

组件介绍

t-comment 是一个评论列表组件，内部使用 list-view 渲染，配合 t-comment-item 支持递归嵌套的子评论展示。适用于帖子详情、社交动态、任务评价等需要展示层级评论的场景。

基础用法

<template>
  <t-comment
    :list="commentList"
    height="100%"
    empty-text="暂无评论"
    @reply="handleReply"
    @like="handleLike"
  />
</template>

<script setup>
const commentList = [
  {
    id: 1,
    author: { name: '用户A', avatar: '/avatar/1.png' },
    content: '这是一条评论',
    create_time: '2026-05-30 12:00:00',
    likes: 3,
    children: [
      {
        id: 2,
        author: { name: '用户B', avatar: '/avatar/2.png' },
        content: '这是回复',
        create_time: '2026-05-30 12:30:00',
        likes: 1,
        children: []
      }
    ]
  }
]
const handleReply = (e) => { console.log('回复:', e) }
const handleLike = (e) => { console.log('点赞:', e) }
</script>

API

Props

属性名	说明	类型	默认值
list	评论数据列表	Array	[]
height	列表高度，list-view 需明确高度	String / Number	'420px'
emptyText	空列表文案	String	'暂无评论'
indent	子回复缩进宽度（px）	Number	28
maxDepth	最大递归层级	Number	5
divider	是否显示分隔线	Boolean	true
replyText	回复动作文本	String	'回复'
authorBadgeText	作者标识文本	String	'作者'
replyPageSize	子评论每次展开数量	Number	5

Events

事件名	说明	回调参数
reply	点击回复时触发	{ item, index, replyItem, replyIndex }
like	点击点赞时触发	{ item, index, replyItem, replyIndex }
userclick	点击用户头像或昵称时触发	{ user, item }
scrolltolower	滚动到底部时触发	—

Slots

无内置插槽，子项通过 t-comment-item 组件递归渲染。

注意事项

• height 必须显式设置，list-view 需要明确高度
• 评论数据结构中的 children 字段用于递归渲染子评论
• 通过 maxDepth 控制递归深度，避免无限嵌套
• 通过 replyPageSize 控制子评论按需展开的数量
• 作者标识通过 authorBadgeText 配置，开启时会在对应评论上显示标识