(十八)硅谷外卖-开发Star组件
作者:互联网
一、图片
二、components/Star/Star.vue
<template> <div class="star" :class="`star-${size}`"> <span class="star-item" :class="starClass" v-for="(starClass) in starClasses"></span> </div> </template> <script> const CLASS_ON = 'on' const CLASS_HALF = 'half' const CLASS_OFF = 'off' export default { name: 'Star', props: { score: Number, size: Number }, computed: { starClasses () { const scs = [] const {score} = this const scoreInteger = Math.floor(score) // 添加类名 CLASS_ON for (let i = 0; i < scoreInteger; i++) { scs.push(CLASS_ON) } // 添加类名 CLASS_HALF if (score * 10 - scoreInteger * 10 > 5) { scs.push(CLASS_HALF) } // 添加类名 CLASS_OFF while (scs.length < 5) { scs.push(CLASS_OFF) } return scs } } } </script> <style lang="stylus" rel="stylesheet/stylus"> @import "../../common/stylus/mixins.styl" .star //2x图 3x图 float left 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('./images/stars/star48_on') &.half bg-image('./images/stars/star48_half') &.off bg-image('./images/stars/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('./images/stars/star36_on') &.half bg-image('./images/stars/star36_half') &.off bg-image('./images/stars/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('./images/stars/star24_on') &.half bg-image('./images/stars/star24_half') &.off bg-image('./images/stars/star24_off') </style>
三、ShopList.vue
<Star :size="24" :score="shop.rating"/> <script> import Star from '../Star/Star' export default { name: 'ShopList', components: { Star } } </script>
标签:bg,Star,stars,image,外卖,images,硅谷,CLASS,&. 来源: https://www.cnblogs.com/mxsf/p/10991354.html