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 相关文章推荐
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
取得一定长度的内容,处理中文
2006/12/20 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
javascript随机变色实例代码
2019/10/15 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
详解Django框架中的视图级缓存
2015/07/23 Python
python字符串,数值计算
2016/10/05 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python匿名函数及应用示例
2019/04/09 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
留学推荐信怎么写
2014/01/25 职场文书
德语专业求职信
2014/03/12 职场文书
红色故事汇观后感
2015/06/18 职场文书
编写python程序的90条建议
2021/04/14 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python