LimeRate 评分

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

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

文档链接

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

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

安装方法

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

注意🔔

本插件依赖的【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

参数	说明	类型	默认值
v-model	当前分值	number	-
value	当前分值	number	-
count	图标总数	number | string	5
size	图标大小，默认单位为px	number | string	24
gap	图标间距，默认单位为px	number | string	4px
step	步长，介于0-1之间	number	1
color	选中时的颜色	string	#ffb400
void-color	未选中时的颜色	string	#c8c9cc
icon	选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	string	star-filled
void-icon	未选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	string	-
allow-half	是否允许半选	boolean	false
clearable	是否允许再次点击后清除	boolean	false
disabled	是否禁用评分	boolean	false
readonly	是否为只读状态	boolean	false

Events

事件名	说明	回调参数
change	当前分值变化时触发的事件	currentValue: number

主题定制

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

变量名称	默认值	描述
--l-rate-icon-scale	1.33	评分图标缩放比例，用于控制图标大小
--l-rate-selected-color	$warning-color	已选中/激活的评分图标颜色
--l-rate-unselected-color	$gray-4	未选中的评分图标颜色
--l-rate-disabled-color	$gray-6	禁用状态的评分图标颜色

支持与赞赏

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

支付宝赞助	微信赞助

源代码

组件源码