diagnosis_app/components/Star/index.vue

<template>
	<div class="zhcx-star-wrap">
		<view class="zhcx-star-item" v-for="(item,index) in total" :key="index" @click="check(number,index+1)">
			<text class="default zhcx-iconfont" :class="icon" :style="{color:defaultcolor}"></text>
			<text class="active zhcx-iconfont"  :class="icon" :style="{width:style(number,index+1)+'%',color:color}"></text>
		</view>	
	</div>	
</template>

<script>
	export default{
		name:'zhcx-star',
		props:{
			star:{
				type:[Number,String],
				default:0
			},
			total:{
				type:[Number],
				default:5
			},
			disable:{
				type:[Boolean],
				default:true
			},
			icon:{
				type:[String],
				default:"zhcx-icon-shoucang"
			},
			color:{
				type:[String],
				default:"red"			
			},
			defaultcolor:{
				type:[String],
				default:"#c8c9cc"				
			}
		},
		data(){
			return{
				number:0
			}
		},
		watch:{
			// number(now,pre){
			// 	console.log(now,pre)
			// }
		},
		created() {
			this.number=this.star;
		},
		methods:{
			style(star,index){
				let status=0;
				if(index<=Math.floor(star)){
					status=100;
				}else if(Math.ceil(star)===index){
					status=(star-(Math.floor(star)))*100;
					status=parseFloat(status).toFixed(2);
				}else{
					status=0;
				}
				return status;
			},
			check(star,index){
				if(this.disable){
					return;
				}
				let status=this.style(star,index);
				let checked=!(100>status);
				let statNumber=star;
				if(checked){
					this.number=index-1;
					statNumber=index-1;
				}else{
					this.number=index;
					statNumber=index;
				}
				this.$emit('check',{
					checked,
					star:statNumber,
					index
				})	
			}			
		}
	}
</script>
	
<style scoped>
.zhcx-star-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.zhcx-star-wrap .zhcx-star-item {
  position: relative;
  width: 50upx;
  height: 50upx;
}
.zhcx-star-wrap .zhcx-star-item:not(:first-child){
	margin-left: 10upx;
}
.zhcx-star-wrap .zhcx-star-item .zhcx-iconfont {
  font-size: 50upx;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.zhcx-star-wrap .zhcx-star-item .default {
  color: #c8c9cc;
}
.zhcx-star-wrap .zhcx-star-item .active {
  width: 100%;
}	
</style>