kly_uniapp/components/starts/index.vue

<!-- 评分星星组件 -->
<template name="trailerStars">
	<view style="display: flex;">
		<image style="margin-right: 10upx;" :key="index" :data-index="index" @click="start_click" v-for="(yellow, index) in score"
			:src="'/static/start'+(index<currentScore?1:2)+'.png'" :class="allowTap==1?'star-ico':'star-ico2'"></image>
	</view>
</template>

<script>
	export default {
		name: "trailerStars",
		data() {
			return {
				score: 5,
				currentScore: 1,
				isAllowTap: 0,
			};
		},

		props: {
			innerScore: 0,
			changeScore: {},
			allowTap: {},
		},

		created() {
			this.currentScore = Number(this.innerScore).toFixed(0);
			this.isAllowTap = Number(this.allowTap)
		},
		methods: {
			start_click(e) {
				if (this.isAllowTap == 1) {
					const index = e.currentTarget.dataset.index
					this.currentScore = index + 1
					this.$emit("changeScore", index + 1)
				}
			},
		},
	}
</script>

<style>
	.movie-score-wapper {
		display: flex;
		flex-direction: row;
	}

	.star-ico {
		width: 60upx;
		height: 60upx;
	}

	.star-ico2 {
		width: 30upx;
		height: 30upx;
	}
</style>