frontend/examking-app/plugins/uview-ui/components/u-rate/u-rate.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
		<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
			<u-icon
				:name="activeIndex > index ? elActiveIcon : inactiveIcon"
				@click="click(index + 1, $event)"
				:color="activeIndex > index ? elActiveColor : inactiveColor"
				:custom-style="{
					fontSize: size + 'rpx',
					padding: `0 ${gutter / 2 + 'rpx'}`
				}"
				:custom-prefix="customPrefix"
				:show-decimal-icon="showDecimalIcon(index)"
				:percent="decimal"
				:inactive-color="inactiveColor"
			></u-icon>
		</view>
	</view>
</template>

<script>/**
 * rate 评分
 * @description 该组件一般用于满意度调查，星型评分的场景
 * @tutorial https://www.uviewui.com/components/rate.html
 * @property {String Number} count 最多可选的星星数量（默认5）
 * @property {String Number} current 默认选中的星星数量（默认0）
 * @property {Boolean} disabled 是否禁止用户操作（默认false）
 * @property {String Number} size 星星的大小，单位rpx（默认32）
 * @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2）
 * @property {String} active-color 选中的星星颜色（默认#FA3534）
 * @property {String} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill）
 * @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
 * @property {String} gutter 星星之间的距离（默认10）
 * @property {String Number} min-count 最少选中星星的个数（默认0）
 * @property {Boolean} allow-half 是否允许半星选择（默认false）
 * @event {Function} change 选中的星星发生变化时触发
 * @example <u-rate :count="count" :current="2"></u-rate>
 */

export default {
	name: 'u-rate',
	props: {
		// 用于v-model双向绑定选中的星星数量
		// 1.4.5版新增
		value: {
			type: [Number, String],
			default: -1
		},
		// 要显示的星星数量
		count: {
			type: [Number, String],
			default: 5
		},
		// 当前需要默认选中的星星(选中的个数)
		// 1.4.5后通过value双向绑定，不再建议使用此参数
		current: {
			type: [Number, String],
			default: 0
		},
		// 是否不可选中