Vue实现Rate组件（星星评分）

Posted 2020-12-22 z-j-c

这个功能就类似于某宝在购物之后，对商品进行评价

先看一下效果

那么实现这个功能也很简单，新建一个my-rate组件，然后上代码

  1 <template>
  2   <div class="rate" :class="{‘disabled‘:disabled}">
  3     <span v-if="showText" class="text">{{curScore||score}}分</span>
  4     <div class="star-wrap">
  5       <i
  6         v-for="(i, index) in 5"
  7         :key="index"
  8         @mouseenter="disabled ? ‘‘ : curScore=i"
  9         @mouseleave="disabled ? ‘‘ : curScore=‘‘"
 10         @click="disabled ? ‘‘ : setScore(i)"
 11         :class="getClass(i)"
 12       >
 13         <i v-if="disabled&&i==Math.floor(score)+1" class="icon-star" :style="‘width:‘+width"></i>
 14       </i>
 15     </div>
 16   </div>
 17 </template>
 18 <script>
 19 export default {
 20   name: ‘MyRate‘,
 21   props: {
 22     // 分数，默认0，保留一位小数
 23     score: {
 24       type: Number,
 25       default: 0
 26     },
 27     // 是否只读，默认false，鼠标点击可以打分
 28     disabled: {
 29       type: Boolean,
 30       default: false
 31     },
 32     // 是否显示分数，默认false
 33     showText: {
 34       type: Boolean,
 35       default: false
 36     }
 37   },
 38   data () {
 39     return {
 40       curScore: ‘‘,
 41       width: ‘‘
 42     }
 43   },
 44   created: function () {
 45     this.getDecimal()
 46   },
 47   methods: {
 48     getClass (i) {
 49       if (this.curScore === ‘‘) {
 50         return i <= this.score ? ‘icon-star‘ : ‘icon-star-o‘
 51       } else {
 52         return i <= this.curScore ? ‘icon-star‘ : ‘icon-star-o‘
 53       }
 54     },
 55     getDecimal () {
 56       this.width = Number(this.score * 100 - Math.floor(this.score) * 100) + ‘%‘
 57     },
 58     setScore (i) {
 59       this.$emit(‘update:score‘, i)
 60     }
 61   }
 62 }
 63 </script>
 64 <style lang="less" scoped>
 65 .rate{
 66   .text{
 67     font-size: 18px;
 68     color: #ff7f2c;
 69     font-weight: bold;
 70   }
 71   .star-wrap{
 72     line-height: 0;
 73     .icon-star-o{
 74       position: relative;
 75       width:8px;
 76       height: 8px;
 77       line-height: 0;
 78       display: inline-block;
 79       margin-right: 2px;
 80       background: url(‘../../public/gray.png‘) 0 0 ~‘/‘ auto 100%;   // 这边是没有选中星星的图片

 81       .icon-star{
 82         position: absolute;
 83         left:0;
 84         top:0;
 85       }
 86     }
 87     .icon-star{
 88       width: 8px;
 89       height: 8px;
 90       line-height: 0;
 91       display: inline-block;
 92       margin-right: 2px;
 93       background: url(‘../../public/yellow.png‘) 0 0 ~‘/‘ auto 100%;   // 这边是选中之后星星的图片
 94     }
 95     i:last-child{
 96       margin-right: 0px;
 97     }
 98   }
 99 }
100 </style>

注意，你的项目必须支持less，这边样式用的less

在页面调用，首先引入上面的组件

 1   <div class="hello">
 2     <h3>只读，不显示数字：</h3>
 3     <my-rate :score="1.5" :disabled="true"/>
 4     <h3>只读，显示数字：</h3>
 5     <my-rate :score="3.6" :disabled="true" showText/>
 6     <h3>只读，显示数字：</h3>
 7     <my-rate :score="4" :disabled="true" showText/>
 8     <h3>鼠标点击评分,显示数字：</h3>
 9     <my-rate :score.sync="curScore" showText/>
10   </div>

这样就实现了一个封装评分的组件