更新记录

1.0.5(2024-07-03)

适配r-form

1.0.4(2024-07-03)

更新文档

1.0.3(2024-06-17)

r-theme改为使用css变量的形式

查看更多

平台兼容性

HbuilderX/cli最低兼容版本
3.1.0

uni-app

Vue2 Vue3
?
app-vue app-nvue app-android app-ios
? ? ? ?
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
? ? ? ? ? ? ? ? ?
微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 钉钉小程序 快手小程序 飞书小程序 京东小程序
? ? ? ? ? ? ? ? ?
快应用-华为 快应用-联盟
? ?

uni-app x

app-android app-ios
? ?
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
? ? ? ? ? ? ? ? ?

r-rate

r-rate 是一个借鉴了 van-rate 的一个的uniapp vue3评分组件,用于对事物进行评级操作。

示例

<template>
  <view class="content">
    <!-- <r-badge :content="20" /> -->

    <r-config-provider>
      <view style="padding: 20px">基本使用</view>
      <r-rate v-model:value="value" />

      <view style="padding: 20px">自定义图标</view>
      <r-rate v-model:value="value" icon="like" void-icon="like-o" />

      <view style="padding: 20px">自定义样式</view>
      <r-rate
        v-model:value="value"
        size="50rpx"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />

      <view style="padding: 20px">半星</view>
      <r-rate v-model:value="value2" allow-half />

      <view style="padding: 20px">自定义数量</view>
      <r-rate v-model:value="value" :count="6" />

      <view style="padding: 20px">可清空</view>
      <r-rate v-model:value="value" clearable />

      <view style="padding: 20px">禁用状态</view>
      <r-rate v-model:value="value" disabled />

      <view style="padding: 20px">只读状态</view>
      <r-rate v-model:value="value" readonly />

      <view style="padding: 20px">只读状态显示小数</view>
      <r-rate v-model:value="value2" readonly allow-half />

      <view style="padding: 20px"></view>
    </r-config-provider>
  </view>
</template>
<script setup>
import { ref } from "vue";
const value = ref(1);
const value2 = ref(1.7);
</script>

API

Props

参数 说明 类型 默认值 可选值
value 当前分值 Number
count 图标总数 Number 5
size 图标大小 String 40rpx
gutter 图标间距 String 8rpx -
delay 延迟时间(ms) Number 0 -
color 选中时的颜色 String #ee0a24
voidColor 未选中时的颜色 String #c8c9cc
disabledColor 禁用时的颜色 String #c8c9cc
icon 选中时的图标名称或图片链接,等同于 r-icon 组件的 name 属性 String star
voidIcon 未选中时的图标名称或图片链接,等同于 Icon 组件的 name 属性 String star-o
iconPrefix 图标类名前缀,等同于 Icon 组件的 prefix 属性 String van-icon iconfont
allowHalf 是否允许半选 Boolean false true
clearable 是否允许再次点击后清除 Boolean false true
readonly 是否为只读状态,只读状态下无法修改评分 Boolean false true
disabled 是否禁用评分 Boolean false true
themeName r-theme 的主题名称 String default

Events

事件名 说明 回调参数
change value 值改变后触发的回调 value
update:value value 值改变时触发的回调 value

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问