更新记录

1.0.0（2025-12-07） 下载此版本

appx-rate 是基于 uni-app x 开发的通用评分组件，支持全星 / 半星评分、自定义图标 / 颜色 / 样式、只读 / 禁用状态，适配多端运行，满足各类评分场景需求。

平台兼容性

uni-app x(4.87)

appx-rate 评分组件

appx-rate 是基于 uni-app x 开发的通用评分组件，支持全星/半星评分、自定义图标/颜色/样式、只读/禁用状态，适配多端运行，满足各类评分场景需求。

组件特性

• 支持全星/半星评分模式切换；
• 自定义星星图标（文本/字体图标）、颜色、尺寸；
• 支持评分文本展示，支持占位符动态替换评分值；
• 提供只读/禁用状态，自定义样式穿透；
• 适配移动端触摸交互，支持点击/滑动评分；
• 完善的类型定义，兼容字符串/数字类型的属性传入。

快速使用

基础用法

<template>
  <appx-rate v-model="rate" />
</template>

<script lang="uts" setup>
const rate = ref(3);
</script>

半星评分

<appx-rate v-model="rate" allow-half="true" />

显示评分文本

<appx-rate v-model="rate" show-text="true" text="当前评分：{value}星" />

只读状态

<appx-rate v-model="rate" readonly="true" />

属性说明

事件说明

样式自定义示例

自定义星星颜色和大小

<appx-rate
  v-model="rate"
  icon-size="32rpx"
  normal-color="#CCCCCC"
  active-color="#FF5722"
/>

使用字体图标（如 iconfont）

<!-- 需先全局引入 iconfont 字体库 -->
<appx-rate
  v-model="rate"
  normal-icon="&#xe601;"
  active-icon="&#xe602;"
  icon-font-family="iconfont"
/>

自定义容器和星星样式

<appx-rate
  v-model="rate"
  :container-style="{ padding: '10px' }"
  :star-item-style="{ marginRight: '6px' }"
/>
<!-- 或传入 JSON 字符串 -->
<appx-rate
  v-model="rate"
  container-style="{ 'padding': '10px' }"
  star-item-style="{ 'margin-right': '6px' }"
/>

注意事项

1. 属性值兼容字符串类型（如 allow-half="true"），组件内部会自动解析为对应类型；
2. 使用字体图标时，需确保已全局引入字体库，并正确设置 iconFontFamily；
3. 半星模式下，点击星星会切换“半星/全星”状态（如点击第3颗星，会在 2.5/3 之间切换）；
4. 禁用/只读状态下，组件会自动置灰（opacity: 0.6）且禁止交互；
5. 样式传入字符串时，需遵循 JSON 格式（如 "{ 'font-size': '14px' }"），组件内部会自动解析。

常见问题

Q：半星模式下，评分值为什么是 x.5？

A：半星模式下，评分值以 0.5 为步长（如 1.5、2.5），这是组件默认的半星评分逻辑，符合通用评分场景的交互习惯。

Q：如何修改星星之间的间距？

A：可通过 starItemStyle 属性设置 margin-right，或直接覆盖组件的 scoped 样式（需使用 ::v-deep）：

::v-deep .appx-rate-star-item {
  margin-right: 8px;
}

Q：评分文本的占位符不生效？

A：需确保 text 属性中包含 {value} 占位符，组件会自动替换为当前评分值（如 text="评分：{value}分"）。