jonhon-mes-PDA/components/uni-rate/uni-rate.vue

<template>
	<view class="uni-rate">
		<view :key="index" :style="{ marginLeft: margin + 'px' }" @click="_onClick(index)" class="uni-rate__icon" v-for="(star, index) in stars">
			<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
			<!-- #ifdef APP-NVUE -->
			<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
				<uni-icons style="text-align: left;" :color="activeColor" :size="size" type="star-filled" />
			</view>
			<!-- #endif -->
			<!-- #ifndef APP-NVUE -->
			<view :style="{ width: star.activeWitch,top:-size/2+'px' }" class="uni-rate__icon-on">
				<uni-icons :color="activeColor" :size="size" type="star-filled" />
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import uniIcons from "../uni-icons/uni-icons.vue";

	/**
	 * Rate 评分
	 * @description 评分组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
	 * @property {Number} value 当前评分
	 * @property {Number} max 最大的评分
	 * @property {Number} size 星星的大小
	 * @property {Number} margin 星星的间距
	 * @property {String} color 星星的颜色
	 * @property {String} activeColor 选中状态的星星的颜色
	 * @property {Boolean} isFill = [true|false] 星星的类型，是否为实心类型
	 * @property {Boolean} disabled = [true|false] 是否为不可点击状态
	 * @event {Function} change uniRate 的 value 改变时触发事件，e={value:Number}
	 */

	export default {
		name: "UniRate",
		components: {
			uniIcons
		},
		props: {
			isFill: {
				// 星星的类型，是否镂空
				type: [Boolean, String],
				default: true
			},
			color: {
				// 星星的颜色
				type: String,
				default: "#ececec"
			},
			activeColor: {
				// 星星选中状态颜色
				type: String,
				default: "#ffca3e"
			},
			size: {
				// 星星的大小
				type: [Number, String],
				default: 24
			},
			value: {
				// 当前评分
				type: [Number, String],
				default: 0
			},
			max: {
				// 最大评分
				type: [Number, String],
				default: 5
			},
			margin: {
				// 星星的间距
				type: [Number, String],
				default: 0
			},
			disabled: {
				// 是否可点击
				type: [Boolean, String],
				default: false
			}
		},
		data() {
			return {
				valueSync: ""
			};
		},
		computed: {
			stars() {
				const value = this.valueSync ? this.valueSync : 0;
				const starList = [];
				const floorValue = Math.floor(value);
				const ceilValue = Math.ceil(value);
				// console.log("ceilValue: " + ceilValue);
				// console.log("floorValue: " + floorValue);
				for (let i = 0; i < this.max; i++) {
					if (floorValue > i) {
						starList.push({
							activeWitch: "100%"
						});
					} else if (ceilValue - 1 === i) {
						starList.push({
							activeWitch: (value - floorValue) * 100 + "%"
						});
					} else {
						starList.push({
							activeWitch: "0"
						});
					}
				}
				// console.log("starList[4]: " + starList[4].activeWitch);
				return starList;
			}
		},
		created() {
			this.valueSync = Number(this.value);
		},
		methods: {
			_onClick(index) {
				if (this.disabled) {
					return;
				}
				this.valueSync = index + 1;
				this.$emit("change", {
					value: this.valueSync
				});
			}
		}
	};
</script>

<style scoped>
	.uni-rate {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		line-height: 0;
		font-size: 0;
		flex-direction: row;
	}

	.uni-rate__icon {
		position: relative;
		line-height: 0;
		font-size: 0;
	}

	.uni-rate__icon-on {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 1;
		text-align: left;
	}
</style>