五星评价组件

<template>

    
    <view class="starBox">
        <view v-for="item in stars" :key="item" class="starItem">
            <image class="star"  :src="key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc">
                <view class="item" style="left:0rpx"  :data-key="item+0.5"  @click="selectLeft(item+0.5)"></view>
                <view class="item" style="left:20rpx"  :data-key="item+0.5"  @click="selectRight(item+0.5)"></view>
        </view>
    </view>
    


</template>

<script>
    export default {
        data() {
            return {                    
                    stars: [0, 1, 2, 3, 4],
                    normalSrc: '../../static/img/star.png',
                    
                    selectedSrc: '../../static/img/onStar.png',
                    
                    halfSrc: '../../static/img/halfStar.png',
                    key: 0,//评分
            };
        },
        props:{
            //sort:'',
        },
        methods:{
            selectLeft(e){
                console.log(e)
                // var keyVal = e.currentTarget.dataset.key
                // if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
                // //只有一颗星的时候,再次点击,变为0颗
                //     key = 0;
                // }
                // console.log("得" + keyVal + "分")
                
                // this.$emit("returnDate",keyVal);
                

                
            },
            //点击左边,整颗星
             selectRight: function (e) {
            
             //  var keyVal = e.currentTarget.dataset.key
                
             //  console.log("得" + keyVal + "分")
             //  this.$emit("returnDate",keyVal)
            
            
            
             }

        }
    }
</script>

<style>
    
    .starBox{}
    .starItem{display: inline-block;position: relative;height: 38rpx;}
    .star{display: inline-block;position: absolute;top:0;width:40rpx;height: 38rpx;}
    .starItem:nth-child(1) .star{left:0;}
    .starItem:nth-child(2) .star{left:60rpx;}
    .starItem:nth-child(3) .star{left:120rpx;}
    .starItem:nth-child(4) .star{left:180rpx;}
    .starItem:nth-child(5) .star{left:240rpx;}
    .item {position: absolute;z-index:2;width: 20rpx;height: 38rpx;}
</style>

 

一、整分的五星

<view class="starItem" :class="{active:item}" v-for="(item,index) in clicked_list" :key="item"  @click="choise(index)" :data-index="Number"></view>						
	</view> 

　　

    .starItem{display: inline-block;margin-right:20rpx;width:40rpx;height: 38rpx;background: url(../../static/img/star.png) no-repeat;background-size: 100%;vertical-align:text-top;}
        .starItem.active{background: url(../../static/img/onStar.png) no-repeat;background-size: 100%;}

            

clicked_list:[false,false,false,false,false] ,//对应星星个数,
　　　　　　choise(num){
                // num 为点击的星星在数组中的下标
                this.clicked_list=[false,false,false,false,false];
                num=num+1;
                for(let i= 0 ; i < num ; i++){
                    this.clicked_list[i]=true;
                }
                //将分数传给父组件
                this.$emit('getScore',num)
                console.log('num',num);
            },