fs-uni-template/components/fs-rate/fs-rate.vue

<template>
	<view class="fs-rate">
		<view class="fs-rate-item" @click="handleClick(index)" v-for="(item, index) in count" :key="index">
			<fs-icon
				:type="index < modelValue ? activeIcon : inactiveIcon"
				:color="index < modelValue ? activeColor : inactiveColor"
				:size="iconSize"
				:source="source"
			></fs-icon>
			<view v-if="allowHalf && index < modelValue && index + 1 > modelValue" class="fs-rate-half">
				<view class="fs-rate-half-active" :style="{ width: size / 2 + 'rpx' }">
					<fs-icon :type="activeIcon" :color="activeColor" :size="iconSize" :source="source"></fs-icon>
				</view>
				<view class="fs-rate-half-inactive">
					<fs-icon :type="activeIcon" :color="inactiveColor" :size="iconSize" :source="source"></fs-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 评分组件
 * @description 评分组件
 * @property {Number} count 图标数量
 * @property {String} activeColor 图标选中的颜色
 * @property {String} inactiveColor 图标未选中的颜色
 * @property {String} activeIcon 选中的图标
 * @property {String} inactiveIcon 未选中的图标
 * @property {String} size 图标大小(单位rpx)
 * @property {Boolean} allowHalf 是否允许半星
 * @property {Boolean} disabled 是否禁用
 * @property {String} source 图标来源
 * @event {Function} change change事件
 */
export default {
	name: 'fs-rate'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	modelValue: {
		type: Number,
		default: 0
	},
	count: {
		type: Number,
		default: 5
	},
	activeColor: {
		type: String,
		default: '#F53F3F'
	},
	inactiveColor: {
		type: String,
		default: '#999999'
	},
	size: {
		type: Number,
		default: '40'
	},
	disabled: Boolean,
	activeIcon: {
		type: String,
		default: 'icon-star-fill'
	},
	inactiveIcon: {
		type: String,
		default: 'icon-star'
	},
	source: {
		type: String,
		default: 'inner'
	},
	allowHalf: Boolean
})
const emits = defineEmits(['update:modelValue', 'change'])

const iconSize = computed(() => props.size + 'rpx')

const handleClick = index => {
	if (!props.disabled) {
		emits('update:modelValue', index + 1)
		emits('change', index + 1)
	}
}
</script>

<style lang="scss">
.fs-rate {
	display: flex;

	&-item {
		position: relative;
		& + & {
			margin-left: 8rpx;
		}
	}

	&-half {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		overflow: hidden;

		&-active {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			overflow: hidden;
		}
	}
}
</style>