返回介绍

开发指南

组件

JS

模板

Rate 评分

发布于 2021-04-03 05:35:24 字数 4544 浏览 1043 评论 0 收藏 0

Rate 评分 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  • 通过count参数设置总共有多少颗星星可选择
  • 通过v-model双向绑定初始化时默认选中的星星数量 1.4.5新增
  • 通过current设置初始化时默认选中的星星数量(1.4.5后建议使用v-model的方式,此参数为了向前兼容依然有效,但优先级低于v-model)
<template>
	<u-rate :count="count" v-model="value"></u-rate>
</template>

<script>
	export default {
		data() {
			return {
				count: 4,
				value: 2
			}
		}
	}
</script>

自定义样式

  • 通过active-color设置选中的星星的颜色
  • 通过inactive-color设置未选中时星星的颜色
  • 通过gutter设置星星的间距,左右内边距各占gutter的一半
<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

自定义图标

  • 通过active-icon设置激活的图标
  • 通过inactive-icon设置未激活的图标
  • 通过custom-prefix设置自定义图标,详见:扩展自定义图标库

下方示例为使用心形图标替代默认的星星图标:

<u-rate active-icon="heart-fill" inactive-icon="heart"></u-rate>

评分分级分层 1.7.2

  • 通过colors设置不同颜色区分评分层级
  • 通过icons设置不同类型图标区分评分层级
<template>
  <view>
    <u-rate v-model="value" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: 2,
        colors: ['#ffc454', '#ffb409', '#ff9500'],
        icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill']
      }
    }
  }
</script>

最少选中的数量

<u-rate :min-count="5"></u-rate>

禁用状态

禁用下,无法点击或者滑动选择,但是可以通过current设置默认选中的数量,禁用状态下用来展示分数,允许出现半星

<u-rate :current="3.7" :disabled="true"></u-rate>

API

Props

参数说明类型默认值可选值
v-model 1.4.5双向绑定选择星星的数量String | Number0-
count最多可选的星星数量String | Number5-
current默认选中的星星数量,1.4.5起建议使用v-model方式String | Number0-
disabled是否禁止用户操作Booleanfalsetrue
size星星的大小,单位rpxString | Number32-
inactive-color未选中星星的颜色String#b2b2b2-
active-color选中的星星颜色String#FA3534-
gutter星星之间的距离String | Number10-
min-count最少选中星星的个数String | Number0-
active-icon选中时的图标名,只能为uView的内置图标Stringstar-fill-
inactive-icon未选中时的图标名,只能为uView的内置图标Stringstar-
custom-prefix 1.7.2自定义字体图标库时,需要写上此值,详见:扩展自定义图标库Stringuicon-
colors 1.7.2颜色分级显示,可以用不同颜色区分评分层级Array--
icons 1.7.2图标分级显示,可以用不同类型的icon区分评分层级Array--

Events

事件名说明回调参数
change选中的星星发生变化时触发value:当前选中的星星的数量,如果使用v-model双向绑定方式,无需监听此事件

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文