ssm41471/src/main/webapp/front/components/uni-ui/lib/uni-rate/uni-rate.vue

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

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

<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";
	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