（五）写一个star组件，状态包括全亮、半亮、不亮3个状态

短命女 2022-05-26 11:42 31阅读 0赞

在购买物品之后，一般会对商品有个评价，一共有5颗星星，写一个star组件，状态包括全亮、半亮、不亮3个状态，然后其数量是由后台返回来的，前端根据后台返回的数据进行星星的显示。

如下图所示，是前端的一个显示页面效果图

![20180501162152559][]

下面就具体描述如何对评价的星星star的封装以及父组件如何向子组件传递数据

先准备一下图片素材，由于在不同的设备上像素不一样，所以准备了不同大小的星星图片分别由24/36/48，一颗星状态全亮、半亮、不亮分别用on，half，off表示，如下面是准备的图片

![20180501162713851][]

素材准备好就可以开始写代码了

1、在要调用star组件的.vue文件的<script>标签里面引入star组件，这里是在header.vue文件里面引用star组件，所以在header.vue文件的<script>标签的开头引入star.vue文件

import star from '../star/star';

![20180501163130315][]

2、在header.vue中的<script>标签的输出里面利用components属性注册star组件

![20180501164022162][]

3、现在就可以在header.vue的<template>中引用star组件了，并且利用绑定的自定义的属性向子组件star传递数据，这里要传递的参数有star的size以及评分score，下面是header.vue的<template>的内容

![20180501163657405][]

4、然后在stra.vue的<script>标签里面的输出部分利用props对象声明在headr.vue中绑定的变量size  score，如下所示

<script>   
      export default {
          props:{
            size:{
              type:Number
            },
            score:{
              type:Number
            }
          }
      }
    </script>

5、书写star.vue的<template>的内容，由于该star组件一共要显示5颗星，每颗星的状态可能为全亮、半亮、全灭，所以需要用v-for指令来遍历每颗星，并且每颗星根据其状态来显示css样式

<template>
        
        <div class="star" :class="starType">
          <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
        </div>
    </template>

starType在computed中的定义如下：

<script>
      export default {
          props:{
            size:{
              type:Number
            },
            score:{
              type:Number
            }
          },
          computed:{
            starType(){ 
              return 'star-' + this.size;  //这里的size是父组件传递过来的数据，就是图片名字中的数字部分，如下图红圈所示
            }                              //对图片名的@前半部分的拼接
          }
      }
    </script>

![20180501184428748][]

itemClasses函数返回一个数组，数组里面的元素itemClass表示星星的某个状态类，即

<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>

<script>
        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(){ //在这里定义itemClasses
                let result = [];//用来存放代表星星的状态，一起5颗星
                let score = Math.floor(this.score * 2)/2; //对数据进行一个处理要么为整数要么为4.5,3.5等
                let hasDecimal = score % 1 !== 0; //是否有半星,true表示有半星，false表示没有半星
                let integer = Math.floor(score); //全星个数
                //存放全亮的星星
                for( let i = 0;i<integer;i++ ){
                  result.push(CLS_ON);
                }
                //存放半亮的星星
                if( hasDecimal ){
                  result.push(CLS_HALF);
                }
                //如果星星状态的个数还没有达到5个，那么剩下的用不亮的星星状态代替
                while(result.length < LENGTH){
                  result.push(CLS_OFF);
                }
                return result;
              }
            }
        }
    </script>

其中itemClass的值有on   half   off   ，所以要在star.vue中的<style>标签里面定义不同尺寸star的3种状态的css样式，如下面所示

<style lang="stylus">
      @import "../../common/stylus/mixin.styl"
      .star
        font-size:0
        &.star-48
          .star-item
            display:inline-block
            background-repeat:no-repeat
            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
            display:inline-block
            background-repeat:no-repeat
            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
            display:inline-block
            background-repeat:no-repeat
            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>

到这里就可以完成动态显示星星的状态了

[20180501162152559]: /images/20220526/297ec13a523641c680509423e4c6c9ac.png
[20180501162713851]: /images/20220526/8b10f7eaa042447fb31e47025a35fc0a.png
[20180501163130315]: /images/20220526/53e3ffdecfe44499ba995b2ffebd6bf4.png
[20180501164022162]: /images/20220526/45ebc9522c3a404db879ddd6c982ab84.png
[20180501163657405]: /images/20220526/e56aa7ed42e94b928fd2a28e1a12f7f7.png
[20180501184428748]: /images/20220526/10cc0d2021404c8b9b80a9ad9088f35b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关亮数据，让数据亮起来

文章目录写在前面网络数据获取的挑战代理网络的崛起什么是代理网络？动态住宅代理的革命为什么选择亮数据动

左手的ㄟ右手/ 2024年04月06日 15:44/ 0 赞/ 110 阅读

相关写一个点亮led的单片机代码

这是一个使用C语言编写的点亮LED的单片机代码示例： include <reg52.h> void main() { whi

爱被打了一巴掌/ 2024年03月25日 18:07/ 0 赞/ 100 阅读

相关 STM32点亮一个LED怎么写

STM32点亮一个LED的代码如下： 1. 首先需要定义LED的GPIO端口，在头文件中添加如下代码： define LED_GPIO_PORT GPIOA

淡淡的烟草味﹌/ 2024年03月25日 13:49/ 0 赞/ 90 阅读

相关为什么ServletException不亮

"ServletException" 不亮的原因可能是因为它是一种运行时异常，并不需要明确的处理或抛出。当发生ServletException异常时，服务器会自动处理，并向客户

￡神魔★判官ぃ/ 2024年03月25日 08:44/ 0 赞/ 31 阅读

相关 linux git命令没有高亮,Mac 配置代码高亮 Git状态显示

Mac 一个为开发者量身定做的笔记本，相信你已经装好了iTerm2了，打开你的iTerm2开始我们的配置。文章来源于个人博客 YANGXIANGMING。分享给大家希望能帮助大

忘是亡心i/ 2023年01月22日 04:55/ 0 赞/ 38 阅读

相关代码高亮编辑器封装成vue组件

相比于上一篇文章，关键字列表完善了一下，支持多行注释，js面向过程改为面向对象，去掉jQuery依赖，封装为vue组件。效果图： ![在这里插入图片描述][20201

蔚落/ 2022年12月21日 06:10/ 0 赞/ 227 阅读

相关电脑灯不亮,电脑键盘失灵指示灯不亮怎么办电脑键盘失灵指示灯不亮解决方法...

电脑键盘失灵指示灯不亮怎么解决? 键盘外壳，有的键盘采用塑料暗钩的技术固定在键盘面板和底座两部分，实现无金属螺丝化的设计。所以分解时要小心以免损坏。一般台式机键盘的分类可以根

ゞ浴缸里的玫瑰/ 2022年09月04日 12:53/ 0 赞/ 204 阅读

相关亮灯

一百个灯泡排成一排，第一轮将所有灯泡打开；第二轮每隔一个灯泡关掉一个，即排在偶数的灯泡都被关掉。第三轮每隔两个灯泡，将开着的灯泡关掉，关掉的灯泡打开。以此类推，第100轮的时候

本是古典何须时尚/ 2022年08月21日 05:49/ 0 赞/ 198 阅读

相关用户语法高亮而root不语法高亮

原文链接：[http://blog.csdn.net/xiaoshao\_0\_0/article/details/4284412][http_blog.csdn.net_xi

墨蓝/ 2022年07月19日 11:50/ 0 赞/ 278 阅读

相关（五）写一个star组件，状态包括全亮、半亮、不亮3个状态

在购买物品之后，一般会对商品有个评价，一共有5颗星星，写一个star组件，状态包括全亮、半亮、不亮3个状态，然后其数量是由后台返回来的，前端根据后台返回的数据进行星星的显示。

短命女/ 2022年05月26日 11:42/ 0 赞/ 32 阅读