Comment 评论

avue-comment 展示头像、作者、时间和评论正文，提供操作区与底部插槽。回复、删除等业务动作由插槽中的按钮实现。

效果预览可直接操作下方示例

同一份数据展示普通与反向布局；操作按钮通过插槽接收当前评论。

正在加载示例…

<template>
  <avue-comment :data="comment" @avatar-click="status = '已点击 ' + $event.author + ' 的头像'">
    <template #actions="{ data }">
      <el-button text type="primary" @click="status = '回复 ' + data.author">回复</el-button>
    </template>
    <template #footer>
      <el-tag size="small" type="info">可以在 footer 展示回复或附加信息</el-tag>
    </template>
  </avue-comment>
  <avue-comment :data="reply" reverse>
    <template #actions="{ data }">
      <el-button text type="primary" @click="status = '编辑 ' + data.author + ' 的评论'">编辑</el-button>
    </template>
  </avue-comment>
  <el-alert :title="status || '点击头像或操作按钮查看当前评论'" :closable="false" />
</template>

<script setup>
import { ref } from 'vue'
const status = ref('')
const comment = {
  avatar: '/images/logo.png', author: '文档维护者', time: '今天 09:00',
  body: '<p>评论操作通过 <strong>actions</strong> 插槽提供，业务可以自行实现回复和编辑。</p>'
}
const reply = {
  author: '体验用户', time: '今天 09:05',
  body: '<p>没有头像时显示首字符占位；reverse 可以反向排列评论。</p>'
}
</script>

Props

参数	说明	类型	默认值
data	评论数据，默认字段见下文	object	{}
props	字段映射，优先于 option.props	object	{}
option	兼容配置对象，当前使用其中的 props	object	{}
reverse	反向排列头像与正文	boolean	false
showAvatar	显示头像区域；无头像时用作者首字符占位	boolean	true
avatarAlt	头像的替代文本	string	''
sanitize	内置 HTML 过滤开关，或自定义 (html) => html 函数	boolean / function	true

默认数据字段为 avatar、author、time、body，body 为 HTML 正文。字段映射示例：{ author: 'userName', body: 'content' }。自定义过滤函数会替代内置过滤；只有可信且已处理的内容才适合关闭过滤。

Events

事件	参数	说明
avatar-click	data	点击有图片的头像；占位头像禁用点击

Slots 与 Methods

插槽	参数	说明
default / actions	{ data }	评论头部操作区，两者可同时使用
footer	{ data }	正文下方的附加内容

组件没有专属公开实例方法。评论内容与回复状态通过业务数据更新。