LimeUI+1.0.0

主题

LimeRate 评分 ​

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

安装 ​

插件市场入口 导入即可。

注意

  • 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
  • 🔔 不需要lime-svg在lime-icon代码中注释掉即可
html
// 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> -->

文档 ​

rate

代码演示 ​

基础用法 ​

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

html
<l-rate v-model="value" />
js
const value = ref(2)

自定义图标 ​

通过 icon 属性设置选中时的图标，void-icon 属性设置未选中时的图标。 在 uniappx app 除了内置的star-filled(五角星)和heart-filled(心形)是使用Drawable绘制外其它的形状使用lime-icon插件实现，性能有损耗。

html

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

自定义样式 ​

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

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

自定义数量 ​

设置 count 可以设置数量。

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

设置步长 ​

设置 step 可以设置步长。介于0-1,默认为1

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

可清空 ​

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

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

禁用状态 ​

通过 disabled 属性来禁用评分。

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

监听 change 事件 ​

评分变化时，会触发 change 事件。

html
<l-rate v-model="value" @change="onChange" />
js
const onChange = (value:number) => {console.log('当前值：' + value)};

插件标签 ​

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

关于vue2的使用方式 ​

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可.
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API ​

Props ​

参数说明类型默认值
v-model当前分值number-
value当前分值number-
count图标总数number | string5
size图标大小，默认单位为pxnumber | string24
gap图标间距，默认单位为pxnumber | string4px
step步长number1
color选中时的颜色string#ffb400
void-color未选中时的颜色string#c8c9cc
icon选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性stringstar-filled
void-icon未选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性string``
allow-half是否允许半选booleanfalse
clearable是否允许再次点击后清除booleanfalse
disabled是否禁用评分booleanfalse

Events ​

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

打赏 ​

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

源代码 ​

组件源码