Vue练习三十五：04_09_星级评分系统

Demo 在线地址：
https://sx00xs.github.io/test/35/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
    <div class="star">
        <span>点击星星就能打分</span>
        <ul ref="oUl">
            <li v-for="(item, index) in message" :key="item.mes" :class="{on:item.isActive}"
            @mouseover="handleOver(index+1)"
            @mouseout="handleOut"
            @click="handleClick(index+1)"
            >
                <a href="#">{{index}}</a>
            </li>
        </ul>
        <span ref="oSpan"></span>
        <p ref="oP"></p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            score:0,
            star:0,
            message:[
                {
                    mes:'很不满意|差得太离谱，与卖家描述的严重不符，非常不满',
                    isActive:false
                },
                {
                    mes:'不满意|部分有破损，与卖家描述的不符，不满意',
                    isActive:false
                },
                {
                    mes:'一般|质量一般，没有卖家描述的那么好',
                    isActive:false
                },
                {
                    mes:'满意|质量不错，与卖家描述的基本一致，还是挺满意的',
                    isActive:false
                },
                {
                    mes:'非常满意|质量非常好，与卖家描述的完全一致，非常满意',
                    isActive:false
                },
            ]
        }
    },
    methods:{
        handleClick(index){
            this.star=index;
            this.$refs.oP.style.display='none';
            this.$refs.oSpan.innerHTML="<strong>" + index + " 分</strong> (" + this.message[index-1].mes.match(/\|(.+)/)[1] +")"
        },
        handleOver(index){
            this.point(index);
            var oP=this.$refs.oP;
            var oUl=this.$refs.oUl;
            var target=event.target;
            oP.style.display='block';
            oP.style.left=oUl.offsetLeft + index * target.offsetWidth - 104 + 'px';
            oP.innerHTML="<em><b>" + index + "</b> 分 " + this.message[index-1].mes.match(/(.+)\|/)[1] + "</em>" + this.message[index-1].mes.match(/\|(.+)/)[1]
        },
        handleOut(){
            this.point();
            this.$refs.oP.style.display='none';
        },
        point(arg){
            this.score = arg || this.star;
            for(var i=0;i<this.message.length;i++) this.message[i].isActive = i < this.score ? true : false
        }
    }
}
</script>