js评分组件使用详解


Posted in Javascript onJune 06, 2017

我们知道,许多外卖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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
Node.js连接mongodb实例代码
Jun 06 #Javascript
jquery实现图片放大点击切换
Jun 06 #jQuery
AngularJS 验证码60秒倒计时功能的实现
Jun 05 #Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 #Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
10条php编程小技巧
2015/07/07 PHP
Vue中引入样式文件的方法
2017/08/18 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python错误的处理方法
2020/06/23 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
.NET常见笔试题集
2012/12/01 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
中学教师请假制度
2014/02/03 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
大明湖导游词
2015/02/03 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
教师节班会开场白
2015/06/01 职场文书
同意报考公务员证明
2015/06/17 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Mysql Online DDL的使用详解
2021/05/20 MySQL