wardrobe/tm-vuetify/components/tm-rate/tm-rate.vue

<template>
	<view class="tm-rate d-inline-block">
		<view @touchstart="ishover=false" @touchend="ishover=disabled?false:true" v-for="(item,index) in num" :key="index" class="d-inline-block" :class="[ishover&&index+1==indexStar?'ani':'','pr-'+margin]">
			<tm-icons :black="black_tmeme" dense @click="clicSelect(index+1)" :size="size" :color="index+1 <= indexStar?color_tmeme:uncolor"
				:name="icon"></tm-icons>
		</view>
		<slot name="default" :num="num"><text v-if="showNum" :class="['text-'+color_tmeme]">{{indexStar}}</text></slot>
	</view>
</template>

<script>
	/**
	 * 评分
	 * @property {String} color = [] 默认：primary，选中的颜色
	 * @property {String} uncolor = [] 默认：grey-lighten-2，未选中的颜色
	 * @property {Number} num = [] 默认：5，数量
	 * @property {Number} value = [] 默认：0，当前的评分，推荐：value.sync或者v-model.
	 * @property {Number} size = [] 默认：32，单位upx,图标大小。
	 * @property {Number} margin = [] 默认：16，单位upx,间隙。
	 * @property {Boolean} disabled = [] 默认：false，是否禁用。
	 * @property {Boolean} black = [] 默认：null，暗黑模式。
	 * @property {Boolean} show-num = [] 默认：false，是否展示评分数字。
	 * @property {Boolean} icon = [] 默认：icon-collection-fill，图片名称，可以自定义其它的。
	 * @property {String} name = [] 默认：''，提交表单时的的字段名称标识
	 * @property {Function} change 评分改变时触发，参数当前的评分。
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmIcons},
		name: "tm-rate",
		model: {
			prop: "value",
			event: "input"
		},
		props: {
			//提交表单时的的字段名称
			name:{
				type:String,
				default:''
			},
			color: {
				type: String,
				default: "primary"
			},
			uncolor: {
				type: String,
				default: "grey-lighten-2"
			},
			black:{
				type:Boolean|String,
				default:null
			},
			num: {
				type: Number,
				default: 5
			},
			value: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 42
			},
			margin: {
				type: Number,
				default: 16
			},
			disabled: {
				type: Boolean,
				default: false
			},
			showNum:{
				type: Boolean,
				default: false
			},
			icon:{
				type: String,
				default: 'icon-collection-fill'
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		computed: {
			black_tmeme:function(){
				if(this.black!==null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			indexStar: {
				get: function() {
					
					return this.value;
				},
				set: function(val) {
					let dval = val;
					if(val > this.num) dval = this.num;
					this.$emit("input",val)
					this.$emit("update:value",val)
					this.$emit("change",val)
				
				}
			}
		},
		data() {
			return {
				ishover:false,
			};
		},
		methods: {
			clicSelect(index) {
				if (this.disabled) return;
				this.indexStar = index;
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tm-rate{
		.ani {
			animation: ani 0.2s  linear;
		}
	}
	
	@keyframes ani {
		0% {
			transform: scale(0.85)
		}
	
		50% {
			transform: scale(1.2)
		}
	
		100% {
			transform: scale(0.85)
		}
	}
</style>