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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Vue基础配置讲解
Nov 29 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
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数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js版本A*寻路算法
2006/12/22 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Django实现单用户登录的方法示例
2019/03/28 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
vue项目实现分页效果
2021/03/24 Vue.js
初中科学教学反思
2014/01/21 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
个人向公司借款协议书
2016/03/19 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android