Details about how to use the js scoring component and how to use the js scoring component

Details about how to use the js scoring component and how to use the js scoring component

We know that many takeout apps have stars. Here I will summarize the development of the scoring component and learn the video: ELE. Me (MOOC)

1.html

<div class="star" :class="starType">    <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span></div>

Explanation

1. Bind starType to a large div because there are multiple scoring components in the App and their sizes are different. Therefore, dynamically bind the class according to the size.

The same principle is also introduced in the header component development in the previous section, but until I write it here, I gradually understand the significance of class in vue. js. In the past, I thought that since I could directly add a class, why do I need to bind a class. Now I understand that you can directly add a class to the basic style settings, but sometimes it is necessary to bind a class when there are different styles according to different States.

2. v-for here we do not write five spans, but traverse itemClasses, which is a common method in vue. js. This reduces code and dynamically acquires data.

2. js part

1. Obtain the Score data.

As in the previous section, we use props to receive data. We want to receive two types of data, one is the size of the stars and the other is the score.

props: {      size:{        type:Number      },      score:{        type:Number      }    }

2. attribute calculation

1). Receive size dynamic binding of different classes

starType() {        return 'star-'+this.size;      }  .star-48 {    width: 20px;    height: 20px;    margin-right: 22px;    background-size: 20px 20px;      }  .star-36 {    width: 15px;    height: 15px;    margin-right: 6px;    background-size: 15px 15px;  }  .star-24 {    width: 10px;    height: 10px;    margin-right: 3px;    background-size: 10px 10px;  }

2). Add the full-star semi-star and no-star by computing.

const LENGTH = 5;const CLS_ON = 'on';const CLS_HALF = 'half';const CLS_OFF = 'off';itemClasses() {        let result = [];        let score = Math.floor(this.score*2)/2;        let hasDecimal = score%1 !== 0;        let integer = Math.floor(score);        for (var i = 0; i < integer; i++) {          result.push(CLS_ON);        }        if(hasDecimal) {          result.push(CLS_HALF);        }        while (result.length<LENGTH) {          result.push(CLS_OFF);        }        return result;      }

The idea of this Code is to create an array to store stars and determine whether the scores are in. more than 5, the score is rounded up, how many points are pushed to several on stars, there are. more than 5, push a half, then push into off until the length reaches 5.

32.16.css
Take the size of star-48 as an example.

.star-48 .on {    background-image: url('star48_on@2x.png')  }  .star-48 .half {    background-image: url('star48_half@2x.png')  }  .star-48 .off {    background-image: url('star48_off@2x.png')  }

4. complete code

<template> <div class="star" :class="starType">  <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span> </div></template><script type="text/javascript"> const LENGTH = 5; const CLS_ON = 'on'; const CLS_HALF = 'half'; const CLS_OFF = 'off'; export default {  props: {   size:{    type:Number   },   score:{    type:Number   }  },  computed:{   starType() {    return 'star-'+this.size;   },   itemClasses() {    let result = [];    let score = Math.floor(this.score*2)/2;    let hasDecimal = score%1 !== 0;    let integer = Math.floor(score);    for (var i = 0; i < integer; i++) {     result.push(CLS_ON);    }    if(hasDecimal) {     result.push(CLS_HALF);    }    while (result.length<LENGTH) {     result.push(CLS_OFF);    }    return result;   }  } };</script><style type="text/css"> .star {  font-size: 0; } /* .star-48 {  width: 20px;  height: 20px;  margin-right: 22px;  background-size: 20px 20px;   } */ .star-48 : last-chlid {  margin-right: 0; } .star-48 .on {  background-image: url('star48_on@2x.png') } .star-48 .half {  background-image: url('star48_half@2x.png') } .star-48 .off {  background-image: url('star48_off@2x.png') } .star-36 {  width: 15px;  height: 15px;  margin-right: 6px;  background-size: 15px 15px; } .star-36 .no {  background-image: url('star36_on@2x.png') } .star-36 .half {  background-image: url('star36_half@2x.png') } .star-36 .off {  background-image: url('star36_off@2x.png') } .star-24 {  width: 10px;  height: 10px;  margin-right: 3px;  background-size: 10px 10px; } .star-24 .no {  background-image: url('star24_on@2x.png') } .star-24 .half {  background-image: url('star24_half@2x.png') } .star-24 .off {  background-image: url('star24_off@2x.png') } .star-item {  display: inline-block;  background-repeat: no-repeat;  width: 20px;  height: 20px;  margin-right: 22px;  background-size: 20px 20px; }</style>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.