Review 评价组件

用于展示用户评价的组件，支持评分、评论内容、用户信息和认证状态。适用于电商产品页面、服务评价、内容评论等场景。

设计理念

信息层次清晰 - 评分、用户信息、评论内容分层展示
信任感建立 - 通过认证标识和真实用户信息建立信任
视觉友好 - 合理的间距和排版，易于阅读
灵活配置 - 支持多种展示模式和自定义样式

案例

张

张先生

产品非常好用，质量很棒！推荐购买。

2024/01/15

Props

avatar

用户头像URL，支持图片链接。当未提供时，组件会显示用户名称的首字母作为默认头像。

王先生

已认证

非常满意，超出预期！

2024/01/08

李

李女士

已认证

整体不错，服务态度很好，推荐购买。

2024/01/10

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="王先生"
  rating={5}
  comment="非常满意，超出预期！"
  date="2024-01-08"
  verified={true}
  avatar="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
/>

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="整体不错，服务态度很好，推荐购买。"
  date="2024-01-10"
  verified={true}
/>

<template>
  <Review
    userName="王先生"
    :rating="5"
    comment="非常满意，超出预期！"
    date="2024-01-08"
    :verified="true"
    avatar="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

class

自定义CSS类名，用于覆盖默认样式。

张

张先生

产品非常好用，质量很棒！推荐购买。

2024/01/15

赵

赵女士

质量很好，包装精美，值得推荐。

2024/01/05

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张先生"
  rating={5}
  comment="产品非常好用，质量很棒！推荐购买。"
  date="2024-01-15"
/>

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="赵女士"
  rating={4}
  comment="质量很好，包装精美，值得推荐。"
  date="2024-01-05"
  class="cosy:border-2 cosy:border-primary cosy:rounded-xl"
/>

comment

评论内容，支持短评论和长评论的展示。

王

王先生

很好！

2024/01/08

李

李女士

已认证

这个产品真的很不错，质量超出了我的预期。包装精美，物流也很快，客服态度也很好。虽然价格稍微贵了一点，但是性价比还是很高的。推荐给需要的朋友们！

2024/01/10

---



import { Review } from "@coffic/cosy-ui";
---

<Review userName="王先生" rating={5} comment="很好！" date="2024-01-08" />

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="这个产品真的很不错，质量超出了我的预期。包装精美，物流也很快，客服态度也很好。虽然价格稍微贵了一点，但是性价比还是很高的。推荐给需要的朋友们！"
  date="2024-01-10"
  verified={true}
/>

date

评价日期，支持字符串格式的日期。组件会自动格式化显示。

张

张先生

产品非常好用，质量很棒！推荐购买。

2024/01/15

李

李女士

整体不错，服务态度很好，推荐购买。

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张先生"
  rating={5}
  comment="产品非常好用，质量很棒！推荐购买。"
  date="2024-01-15"
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="整体不错，服务态度很好，推荐购买。"
/>

muted

是否使用柔和色样式（未激活状态）。

张

张三

已认证

这个产品非常好用，质量很棒！

2024/01/15

张

张三

已认证

这个产品非常好用，质量很棒！

2024/01/15

---



import { Review } from "@coffic/cosy-ui";
---

<Review
    userName="张三"
    rating={4}
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    verified
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
    userName="张三"
    rating={4}
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    verified
    muted
/>

<template>
  <Review
    userName="张三"
    :rating="4"
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    :verified="true" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Review
    userName="张三"
    :rating="4"
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    :verified="true"
    :muted="true" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

rating

评分，取值范围为1-5，支持整数和小数。组件会显示对应的星级评分。

王

王先生

不太满意，质量一般。

2024/01/08

李

李女士

还可以，中规中矩。

2024/01/10

张

张先生

已认证

非常满意，超出预期！

2024/01/15

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="王先生"
  rating={1}
  comment="不太满意，质量一般。"
  date="2024-01-08"
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={3}
  comment="还可以，中规中矩。"
  date="2024-01-10"
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张先生"
  rating={5}
  comment="非常满意，超出预期！"
  date="2024-01-15"
  verified={true}
/>

userName

用户名称，支持中文和英文名称的显示。

张

张三

质量不错，推荐购买。

2024/01/08

John Smith

已认证

Excellent product, highly recommended!

2024/01/10

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张三"
  rating={4}
  comment="质量不错，推荐购买。"
  date="2024-01-08"
/>

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="John Smith"
  rating={5}
  comment="Excellent product, highly recommended!"
  date="2024-01-10"
  verified={true}
/>

verified

是否认证用户，设置为true时会显示认证标识。

李

李女士

已认证

整体不错，服务态度很好，推荐购买。

2024/01/10

王

王先生

非常满意，超出预期！

2024/01/08

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="整体不错，服务态度很好，推荐购买。"
  date="2024-01-10"
  verified={true}
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="王先生"
  rating={5}
  comment="非常满意，超出预期！"
  date="2024-01-08"
  verified={false}
/>

<template>
  <Review
    userName="李女士"
    :rating="4"
    comment="整体不错，服务态度很好，推荐购买。"
    date="2024-01-10"
    :verified="true" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

Slots

插槽名	描述
`default`	默认插槽，用于自定义内容