圆月山庄资源网

js评分组件使用详解
网络编程 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

我们知道，许多外卖app都有评分的星星，这里我总结一下对评分组件的开发，学习视频：饿了么实战（慕课网）

js评分组件使用详解

1.html部分

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

解释

1.在大的div里绑定starType是因为在整个App中，有多个评分组件，而它们的大小不一样，所以根据大小动态的绑定class.

同样的原理，在上一节header组件开发中也有介绍，但直到写到这里我开始渐渐明白vue.js中:class的意义。以前我想既然可以直接添加class，为什么要用绑定class来多此一举。现在我明白的，基础的样式设定，直接添加class就可以了，但是有时候涉及到根据不同的状态有不同的样式时，就要用绑定class了。

2.v-for 这里我们没有写5个span，而是遍历itemClasses，这是vue.js中的一种常用方法。既减少了代码，而且动态获取数据。

2.js部分

1. 得到评分数据

像上一节一样，我们通过props来接收数据。我们要接收的是两个number类型的数据，一个是星星的尺寸，一个是分数。

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

2.属性的计算

1）.接收size动态绑定不同的class

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）. 通过计算确定添加全星半星和无星

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;
      }

这段代码的思路是：创建一个数组储存星星，判断分数是否在.5以上，将分数取整，有多少分push几个on星星进去，有.5以上，push一个half，然后push进off直到长度达到5。

3）.css部分
以star-48的尺寸为例

.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.完整代码

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
js,评分组件
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接