更新记录

0.0.2（2024-11-07） 下载此版本

• fix: uniappx app 改使用 drawble 绘制

0.0.1（2024-08-18） 下载此版本

• init

平台兼容性

lime-rate 评分

• 评分组件，可自定义评分图标的大小、间隔、评分数，步长等。用于对事物进行评级操作，兼容uniapp/uniappx(web,ios,安卓)。
• uniappx app 内置五角星符号和心形符号为Drawable绘制的，性能超高，如果自定义图标则使用icon组件。
• 插件依赖lime-shared、lime-icon、lime-svg介意勿下。

安装

在插件市场导。

代码演示

基础用法

通过 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)};

插件标签

• 默认 l-rate 为 component
• 默认 lime-rate 为 demo

关于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

常见问题

插件包含一下lime-svg为收费插件。如果你不需要svg，可以在lime-icon里注释掉，lime-svg为APP原生插件，收费为1元，源码为5元。如果你需要svg，可以考虑一下购买。

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。