<template>
<div class="Rating-gray">
<i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i>
</div>
</template>
<script>
// 星星长度
const LENGTH = 5;
// 星星对应的class
const CLS_ON = "fa-star";
const CLS_HALF = "fa-star-half-empty";
const CLS_OFF = "fa-star-o";
export default {
name: "Rating",
props: {
rating: Number
},
computed: {
itemClasses() {
// 4.8 四个全星 1个半星
let result = [];
// 对分数进行处理, 向下取0.5的倍数
let score = Math.floor(this.rating * 2) / 2;
// 控制半星
let hasDecimal = score % 1 !== 0;
// 全星
let integer = Math.floor(score);
// 全星放入到数组中
for (let 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 scoped>
.Rating-gray {
margin-right: 1.066667vw;
color: #ffbe00;
display: inline-block;
}
</style>

vue星级评分组件的更多相关文章

  1. 干货之运用CALayer创建星级评分组件(五角星)

    本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的 ...

  2. Angular 星级评分组件

    一.需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需 ...

  3. vue 星星评分组件

    显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...

  4. Full-featured Vue 评分组件

    分享一下最近写的 vue 的评分组件 Features: 支持半星.可清除.文案展示.只读.自定义颜色.自定义字符及图片等.支持 hover 的时候改变 value.内置三种样式,以及非常好看 DEM ...

  5. js实现星级评分效果(非常规5个li代码)

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  6. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  7. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

  8. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  9. javascript星级评分(多个)

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. 持续优化云原生体验,阿里云在Serverless容器与多云上的探索

    近日,阿里云宣布推出Serverless Kubernetes服务此举意在降低容器技术的使用门槛.简化容器平台运维.并同时发布阿里云服务对Open Service Broker API标准支持,通过一 ...

  2. Jenkins 节点配置中没有Launch agent via Java Web Start 选项

    Jenkins节点配置的启动方式中没有Launch agent via Java Web Start,如下图 怎样能设置出来呢? 1:打开"系统管理"——"Configu ...

  3. CTF_工具网址收藏

    杂项 条形码在线扫描 :    https://online-barcode-reader.inliteresearch.com/ PS弄反色ctr+i    :  https://zhidao.ba ...

  4. CF E2 - Daleks' Invasion (medium) (LCA求两点树上路径上的最大边权)

    http://codeforces.com/contest/1184/problem/E2 题意:给出一副图,首先求出这幅图的最小生成树 , 然后修改这幅图上不属于最小生成树的边权,使得修改后的图在求 ...

  5. CDN:BootCDN 项目列表-摘录-20180405

    ylbtech-CDN:BootCDN 项目列表-20180405 1.返回顶部 1.   2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. http://www.boo ...

  6. JS-闭包(Closures)和let声明块级作用域变量

    闭包: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures 闭包是函数和声明该函数的词法环境的组合. let: https ...

  7. Linux 两台服务器之间传递文件

    参考: https://www.cnblogs.com/clovershell/p/9870603.html linux采用scp命令拷贝文件到本地,拷贝本地文件到远程服务器   // 假设远程服务器 ...

  8. Delphi Indy IDHttp 403 forbidden

    http://hbk777.blog.163.com/blog/static/6058086200681594333361/ Delphi Indy IDHttp 403 forbidden 2006 ...

  9. Python的Django框架中的URL配置与松耦合

    Python的Django框架中的URL配置与松耦合 用 python 处理一个文本时,想要删除其中中某一行,常规的思路是先把文件读入内存,在内存中修改后再写入源文件. 但如果要处理一个很大的文本,比 ...

  10. 【C#学习笔记】string.Format对C#字符串格式化

    文章转自:CSDN   http://blog.csdn.net/samsone/article/details/7556781 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格 ...