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

短命女 2022-05-26 11:42 24阅读 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 条评论，24人围观）

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

相关阅读

相关为什么ServletException不亮

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

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

相关 JS 代码高亮插件

简介在网页的使用过程中，经常会有代码展示的必要。而不同颜色的关键词，可以让代码看起来更直观、更美观。代码高亮插件官网：[https://highlightjs.or

﹏ヽ暗。殇╰゛Y/ 2022年12月31日 06:22/ 0 赞/ 183 阅读

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

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

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

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

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

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

相关亮灯

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

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

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

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

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

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

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

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

相关 ElastcSearch 全局高亮与局部高亮Java api

1. 代码 public static void main(String[] args) { // 高亮设置 Hi

Love The Way You Lie/ 2022年02月14日 00:25/ 0 赞/ 241 阅读

相关 7个高性能JavaScript代码高亮插件

转自： [https://blog.csdn.net/p312011150/article/details/84028545][https_blog.csdn.net_p312

╰+攻爆jí腚メ/ 2022年01月22日 13:55/ 0 赞/ 277 阅读

相关代码高亮

知识点代码高亮显示符号 \` 代码高亮显示符号 ~(不推荐) 演示内容 ```java public static void

ゞ浴缸里的玫瑰/ 2021年12月14日 00:27/ 0 赞/ 383 阅读