Vue实现Rate组件（星星评分）这个功能就类似于某宝在购物之后，对商品进⾏评价
先看⼀下效果
那么实现这个功能也很简单，新建⼀个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" :></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,
25default: 0
26    },
27// 是否只读，默认false，⿏标点击可以打分
28    disabled: {
29      type: Boolean,
30default: false
31    },
32// 是否显⽰分数，默认false
33    showText: {
34      type: Boolean,
35default: false
36    }
37  },
38  data () {
39return {
40      curScore: '',
41      width: ''
42    }
43  },
44  created: function () {
46  },
47  methods: {
48    getClass (i) {
49if (this.curScore === '') {
50return i <= this.score ? 'icon-star' : 'icon-star-o'
51      } else {
52return i <= this.curScore ? 'icon-star' : 'icon-star-o'
53      }
54    },
55    getDecimal () {
56this.width = Number(this.score * 100 - Math.floor(this.score) * 100) + '%'
margin rate
57    },
58    setScore (i) {
59this.$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>
这样就实现了⼀个封装评分的组件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。