Ci2Order.vue/App/components/z-star-rate/z-star-rate.vue

<template>
	<view>
		<view class="star_rate flex-n fac">
			<view class="star ml-10" :class="checkedrate>=index?'star_select':''"  v-for="(item,index) in rateList" :key="index" @click="checkStar(index)">
				
			</view>
		</view>
	</view>
</template>

<script>
	//  1-2颗星是“低“ 3颗星是“中“ 4-5颗星是“高”
	export default{
		name:'z-star-rate',
		props:{
			disabled:Boolean
		},
		data(){
			return{
				rateList:new Array(5),
				rate:0,
				checkedrate:-1
			}
		},
		methods:{
			checkStar(idx){
				if(this.disabled){
					return;
				}
				if(this.checkedrate==idx){
					this.checkedrate=-1;
				}else{
					this.checkedrate=idx;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.star_rate{
		.star{
			width: 40rpx;
			height: 38rpx;
			background: grey;
		}
		.star_select{
			background: yellow;
		}
	}
</style>