Vue-star component development instance, vue-star instance

Vue-star component development instance, vue-star instance

Create a star. vue and related image information in the Star folder. Easy nearby maintenance of components

Star. vue:

<Template> <div class = "star": class = "starSize"> <span v-for = "(itemClass, key) in itemClasses ": class = "itemClass" class = "star-item"> </span> </div> </template> <script> const LENGTH = 5; const CLS_ON = 'on '; const CLS_HALF = 'half'; const CLS_OFF = 'off'; export default {props: {size: {// size, 24, 36, 48 type: Number}, score: {type: number }}, computed: {starSize () {return 'star-'+ this. size;}, itemClasse S () {let result = []; let score = Math. floor (this. score * 2)/2; // adjust the value to an integer and. 5 format, for example: 4.3 => 4; 4.6 => 4.5 let hasDecimal = score % 1! = 0; let integer = Math. floor (score); for (let 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 lang = "stylus" rel = "stylesheet/stylus"> @ import ".. /.. /common/stylus/mixin. styl ";. star font-size: 0. star-item display: inline-block background-repeat: no-repeat &. star-48. star-item width: 20px height: 20px margin-right: 22px background-size: 20px 20px &. last-child margin-right: 0 &. on bg-image ('star48 _ on ')&. half bg-image ('star48 _ half ')&. off bg-image ('star48 _ off ')&. star-36. star-item width: 15px height: 15px margin-right: 6px background-size: 15px 15px &. last-child margin-right: 0 &. on bg-image ('star36 _ on ')&. half bg-image ('star36 _ half ')&. off bg-image ('star36 _ off ')&. star-24. star-item width: 10px height: 10px margin-right: 3px background-size: 10px 10px &. last-child margin-right: 0 &. on bg-image ('star24 _ on ')&. half bg-image ('star24 _ half ')&. off bg-image ('star24 _ off') </style>

Header. vue:

<star :size="48" :score="3.5"></star><script>import star from '../star/Star.vue'export default{ components:{ star }}</script>

Mixin. styl:

bg-image($url) background-image: url($url + '@2x.png') @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) background-image: url($url + '@3x.png')

The above vue-star evaluation component development example is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's home.