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

1 <template>
2   <div   :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         : 
12       >
13         <i v-if="disabled&&i==Math.floor(score)+1"   :style="''+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        ''
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 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 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>

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>