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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
HTML TO JavaScript 转换
Jun 26 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
数据库相关问题
2006/10/09 PHP
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php 保留字列表
2012/10/04 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
JavaScript this 深入理解
2009/07/30 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
python切换hosts文件代码示例
2013/12/31 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python制作词云图代码实例
2019/09/09 Python
三个python爬虫项目实例代码
2019/12/28 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
《小草和大树》教学反思
2014/02/16 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
员工2014年度工作总结
2014/12/09 职场文书
委托书的样本
2015/01/28 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers