vue 5个小星星 评价组件

在一些业务场景下，需要用到评价的功能，你也可以用到element的评价组件，由于需求不一致就自己写了一个评价的星星的组件

1. 创建一个文件 rate.vue ,用来写组件

<template>
 <div class="rate" :class="{'disabled':disabled}">
   <i v-for="i in 5" :key="i" class="iconfont" @mouseenter="disabled ? '':curScore=i" @mouseleave="disabled?'':curScore=''" @click="disabled?'':setScore(i)" :class="getClass(i)">
     <i v-if="disabled&&i==Math.floor(score)+1" class="iconfont icon-xingxing" :style="'width:'+width"></i>
   </i>
   <span v-if="showText" class="text">{{curScore||score}}分</span>
 </div>
</template>

<script>
export default {
   name:'MyRate',
   props: {
       score: {
           type: Number,
           default: 0
           //required: true
       },
       disabled: {
           type: Boolean,
           default: false
       },
       showText: {
           type: Boolean,
           default: false
       }
   },
   data() {
       return {
           curScore: '',
           width:''
       }
   },
   created: function () {
       this.getDecimal();
   },
   methods: {
       getClass(i) {
           if (this.curScore === '') {
               return i <= this.score ? 'icon-xingxing' : 'icon-star-copy'
           } else {
               return i <= this.curScore ? 'icon-xingxing' : 'icon-star-copy'
           }
       },
       getDecimal() {
           this.width=Number(this.score * 100 - Math.floor(this.score) * 100)+'%';
       },
       setScore(i){
           this.$emit('update:score',i);//使用`.sync`修饰符，对score 进行“双向绑定
       }
   }
}
</script>

<style lang="scss">
.rate{
   .iconfont{
       display: inline-block;
       position: relative;
       font-size: 12px;
       margin-right: 8px;
       transition: .3s;
       &+.iconfont{
           margin-left: 5px;
       }
       .iconfont{
           position: absolute;
           left: 0;
           overflow: hidden;
       }
       &.icon-star-copy{
           color: #f4cd17;
       }
       &.icon-xingxing {
           color: #f4cd17;
       }
   }
   &:not(.disabled) .iconfont:hover{
       transform: scale(1.2);
       cursor: pointer;
   }
}
</style>

2. 使用

   <Rate :score="3.5"></Rate>

  import Rate from "../../components/rate/rate";
   components: {
        Rate
    }

最后： 以上评价的组件静态的，暂不支持手动划入