更新记录

0.1.1（2025-08-31）

• chore: 更新文档

0.1.0（2025-05-28）

• chore: 更新文档

0.0.9（2025-05-27）

• fix: 修复uniapp缺少inject

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-rate 评分

一个功能丰富的评分组件，可自定义评分图标的大小、间隔、评分数，步长等。用于对事物进行评级操作，支持半星评分、自定义图标和样式，兼容uniapp/uniappx。

插件依赖：lime-shared、lime-icon、lime-svg、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 评分文档 - 站点1
• 评分文档 - 站点2
• 评分文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-rate
2. 插件市场导入即可，需要源码才能运行
3. 在页面中使用l-rate组件（组件）或lime-rate（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

通过 v-model 来绑定当前评分值。

<l-rate v-model="value" />

const value = ref(2)

自定义图标

通过 icon 属性设置选中时的图标，void-icon 属性设置未选中时的图标。

在 uniappx app 除了内置的star-filled(五角星)和heart-filled(心形)是使用Drawable绘制外，其它的形状使用lime-icon插件实现，性能有损耗。

<l-rate v-model="value" icon="heart-filled" void-icon="heart" />

自定义样式

通过 size 属性设置图标大小，color 属性设置选中时的颜色，void-color 设置未选中时的颜色。

<l-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-color="#eee"
/>

自定义数量

设置 count 可以自定义评分图标的总数。

<l-rate v-model="value" :count="6" />

设置步长

设置 step 可以设置评分的步长，介于0-1之间，默认为1。

<l-rate v-model="value" :step="0.1" />

可清空

当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0。

<l-rate v-model="value" :clearable="true" />

禁用状态

通过 disabled 属性来禁用评分组件，禁用后用户无法进行交互。

<l-rate v-model="value" :disabled="true" />

监听 change 事件

评分变化时，会触发 change 事件，可以通过回调函数获取当前分值。

<l-rate v-model="value" @change="onChange" />

const onChange = (value:number) => {console.log('当前值：' + value)};

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-rate/components/lime-rate -->
<lime-rate />

插件标签说明

• 默认 l-rate 为组件标签
• 默认 lime-rate 为演示标签

Vue2使用说明

插件使用了composition-api，如果你希望在Vue2中使用，请按官方教程vue-composition-api配置。

关键代码是在main.js中的Vue2部分添加以下代码：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

主题定制

组件提供了下列 CSS 变量，可用于自定义样式，uniappx app无效。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助