评分组件开发

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

image.png

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

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

转载于:https://www.cnblogs.com/huyuzhu/p/6949766.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/468471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第4章 第三节 内核同步

抢占式内核和非抢占式内核Linux 内核有两个空间&#xff0c;一个是内核空间一个是用户空间&#xff0c;如果一个进程正在内核态执行的时候&#xff0c;允许内核打断他的执行&#xff0c;让另一个进程执行&#xff0c;那么这个内核就是可抢占式内核。还有一种情况就是&#xff0…

stream去重_Java中对List去重 Stream去重的解决方法

问题当下互联网技术成熟&#xff0c;越来越多的趋向去中心化、分布式、流计算&#xff0c;使得很多以前在数据库侧做的事情放到了java端。今天有人问道&#xff0c;如果数据库字段没有索引&#xff0c;那么应该如何根据该字段去重&#xff1f;大家都一致认为用java来做&#xf…

民企信息化建设个人经历(四)

两周没写了&#xff0c;上班第一天再来留下点记录。节前最后一周&#xff0c;又跟董事长报告了一次&#xff0c;感觉应该还算有点效果。上篇中提到的五个方向(仓库条码化(WMS)&#xff0c;生产条码化(MES)。財务相关模块启用。HR相关系统整合。PLM系统优化)&#xff0c;略微做了…

第四章 第四节 per_cpu

我们上一章说了实现内核同步的方法很多&#xff0c;如下表技术说明适用范围每CPU变量在CPU之间复制数据结构所有CPU原子操作对一个计数器原子地“读-修改-写”的指令所有CPU内存屏障避免指令重新排序本地CPU或所有CPU自旋锁加锁时忙等所有CPU信号量加锁时阻塞等待所有CPU顺序锁…

python的三维图片_python如何做三维图

Python三维绘图在遇到三维数据时&#xff0c;三维图像能给我们对数据带来更加深入地理解。python的matplotlib库就包含了丰富的三维绘图工具。1、创建三维坐标轴对象Axes3D创建Axes3D主要有两种方式&#xff0c;一种是利用关键字projection3dl来实现&#xff0c;另一种则是通过…

抽象类(Abstract)和接口的不同点、共同点(Interface)。

同样点&#xff1a; (1) 都能够被继承 (2) 都不能被实例化 (3) 都能够包括方法声明 (4) 派生类必须实现未实现的方法 区 别&#xff1a; (1) 抽象基类能够定义字段、属性、方法实现。接口仅仅能定义属性、索引器、事件、和方法声明&#xff0c;不能包括字…

为何要使用docker

可能很多人听说过docker&#xff0c;也可能有很多人用过&#xff0c;但是其中的一些细节&#xff0c;可能不是很清楚&#xff0c;还有一些人&#xff0c;像我一样&#xff0c;并不知道docker&#xff0c;也没有用过&#xff0c;刚好最近一个大神朋友比较有空&#xff0c;让他写…

如何解决文件不存在_传奇微端配置Pak密码文件不存在怎么解决?传奇分享汇

在架设gom引擎的版本时&#xff0c;你是否有遇到和我一样的情况呢&#xff1f;微端配置后pak密码文件不存在是怎么回事呢&#xff1f;今天分享pak密码文件不存在的解决方法为什么会出现pak密码文件不存在呢&#xff1f;总结分析有以下2种原因会导致文件不存在1、没有配置对应的…

linux 统计命令执行后的行数或者统计目录下文件数目

ls |wc 是统计你这个目录下的文件数目。ls |wc -l是输出第一个结果即31即文件的数目。 转载于:https://www.cnblogs.com/apple2016/p/6956814.html

oracle 删除补全日志组_Oracle 10g 添加、删除日志组

做日常巡检的时候发现alert日志中有这个错误Thread 1 cannot allocate new log, sequence 319708Checkpoint not complete这个实际上是个比较常见的错误。通常来说是因为在日志被写满时会切换日志组&#xff0c;这个时候会触发一次checkpoint&#xff0c;DBWR会把内存中的脏块往…

那些年,我们在?的那些日子

刚好在今天&#xff0c;我们几个比较好的朋友&#xff0c;都离开了一起奋斗的A公司。 先说明下&#xff0c;这个不是虚构的小说&#xff0c;也不是吹牛逼&#xff0c;就是记录我们几个曾经辉煌和落魄的日子&#xff0c;起名A公司也是为了保护大家的隐私&#xff0c;但是事情肯定…

db2 sql执行历史_5 个免费的在线 SQL 数据库环境,比Navicat 香!

来源&#xff1a;blog.csdn.net/horses/article/details/108603935作者&#xff1a;不剪发的Tony老师文章目录SQL FiddleDB Fiddledb<>fiddleSQL OnlineOracle Live SQL总结今天给大家分享几个在线的免费 SQL 运行环境&#xff0c;也就是在线数据库。这些网站可以帮助我们…

获取要素集中字段的唯一值

/// <summary> /// 获取要素集中字段的唯一值 /// </summary> /// <param name"featureClass">图层</param> /// <param name"fieldName">字段名称</param> /// <returns></returns> public static List&…

嵌入式入门必读

找到一个非常好的书籍而且不用购买的而且是高清版本的原来是放在我的知识星球里面的看到大家下载的也很多现在拿出来分享给大家从单片机到嵌入式这个不是一个简单的过程&#xff0c;其中从单进程到多进程&#xff0c;一个CPU如何做到多进程&#xff0c;怎么跑系统&#xff0c;调…

mysql远程访问 linux_Linux中开启mysql远程访问功能

1、确认3306是否对外开放&#xff0c;mysql默认状态下是不开放对外访问功能的。查看的办法如下&#xff1a;# netstat -an | grep 3306tcp 0 0 127.0.0.1:3306 0.0.0.0:* LISTEN从结果可以看出&#xff0c;mysql的3306端口只监听本地的连接&#xff0c;这样就阻碍了外部IP对该数…

致敬云南滑翔机

今天晚上&#xff0c;看了期待已久的篮球节目&#xff0c;我要打篮球&#xff0c;11点左右&#xff0c;感觉特别困&#xff0c;已经快睡着了&#xff0c;准备关掉电视的时候看到林书豪的图片&#xff0c;林书豪头上有一个标题《我要打篮球》&#xff0c;这个不就是《这&#xf…

个人编码规范

这里所列的编码规范都是我自己的一些编码习惯&#xff0c;同时参考了其他的一些编码规范而总结出的较常用一些规范。供参考&#xff1a; 1、一个类文件中只能包含一个类、枚举。2、所有public修饰的字段、属性、方法、类等必须作详细的注释。3、复杂的业务逻辑处应该注释清楚处…

震惊,用了这么多年的 CPU 利用率,其实是错的

来源&#xff1a;内核月谈, 原文链接&#xff1a;http://www.brendangregg.com/blog/2017-05-09/cpu-utilization-is-wrong.html本文中若有任何疏漏错误&#xff0c;责任在于编译者。有任何建议和意见&#xff0c;请回复内核月谈微信公众号&#xff0c;或通过 caspar at linux.…

string最大容量_string初步使用

1.什么是string?string是一个类&#xff0c;专门用来处理字符串。 而C语言中&#xff0c;字符串实际上是一个char的数组。2.实验#include #include using namespace std;int main(){ string str1 "hello world"; string str2 " smart"; char s…

【尺取或dp】codeforces C. An impassioned circulation of affection

http://codeforces.com/contest/814/problem/C 【题意】 给定一个长度为n的字符串s&#xff0c;一共有q个查询&#xff0c;每个查询给出一个数字m和一个字符ch&#xff0c;你的操作是可以改变字符串中的某些字母&#xff0c;最多改变m个&#xff0c;问操作后只包含字符ch的连续…