Comment 商品评论

参考 NutUI 的 comment 组件，支持对象驱动的评论详情、图片/视频、追评与操作栏。

展示评论信息，支持评论详情、图片/视频、追评与操作栏

演示

9:41

代码示例

<!-- 评论图片单行展示 -->
  <re-comment :info="commentData.info" :images="commentData.images" :operation="replyOnlyOperation" @click="handleCommentClick" @click-images="handleImagesClick" > <template #commentLabels> <view class="demo-label"> <text class="demo-label__text">品质好评</text> </view> </template> </re-comment>

<!-- 评论图片多行展示 -->
  <re-comment header-type="complex" images-rows="multi" :ellipsis="6" :info="commentData.info" :images="commentData.images" @click-operate="handleOperateClick" @click-images="handleImagesClick" > <template #commentLabels> <view class="demo-badge"> <text class="demo-badge__text">官方旗舰店</text> </view> </template> <template #commentShopReply> <text class="demo-reply__label">店铺回复：</text> <text class="demo-reply__text">您好，敏感肌建议先做局部试用；如有任何不适，请第一时间联系客服处理。</text> </template> </re-comment>

<!-- 追评展示 -->
  <re-comment :info="commentData.info" :images="commentData.images" :follow="commentData.follow" @click="handleCommentClick" @click-images="handleImagesClick" />

<!-- 兼容原有简化参数 -->
  <re-comment name="用户A" content="很好用，推荐购买。原有的 name、content、rate、reply 参数仍可继续使用。" :rate="5" date="2026-07-09" reply="感谢支持，我们会继续优化体验。" :images="simpleImageList" :liked="true" @click-operate="handleOperateClick" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-comment />。

API

Comment Props

名称	类型	默认值	描述	必传
avatar	`string`	''	-	N
name	`string`	''	标识名称	N
date	`string`	''	-	N
rate	`number`	5	-	N
content	`string`	''	内容文字	N
images	`Array<string \| CommentImage>`	() : Array<string \| CommentImage> => as Array<string \| CommentImage>	-	N
videos	`Array<CommentVideo>`	() : Array<CommentVideo> => as Array<CommentVideo>	-	N
reply	`string`	''	-	N
liked	`boolean`	false	-	N
info	`CommentInfo`	() : CommentInfo => ({	-	N
follow	`CommentFollow`	-	-	N
headerType	`string`	-	-	N
imagesRows	`string`	-	-	N
ellipsis	`string \| number \| boolean`	-	-	N
operation	`Array<string>`	-	-	N
customStyle	`string`	-	自定义样式	N

Comment Events

名称	参数	描述
click	info: CommentInfo	点击时触发
like	liked: boolean	-
click-operate	operate: string	-
click-images	detail: UTSJSONObject	-

Comment Slots

名称	描述
commentLabels	-
feature	-
commentShopReply	-

Collapse 折叠面板

参考 TDesign 的示例结构，展示基础折叠、状态说明、手风琴和卡片式视觉效果。

CountDown 倒计时

倒计时组件，支持自定义格式化

内容锚点

演示
代码示例
引入
API