Vue实现星级评价效果实例详解


Posted in Javascript onDecember 30, 2019

我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值)

<div class="score">
  <Star :score="poiInfo.wm_poi_score"></Star>
</div>

初始Star.vue

<template>
 <div>
   <div class="star">
     <span class="star-item"></span>
   </div>
   <span>{{ score }}</span>
 </div>
</template>
<script>
export default {
  name: 'Star',
  props: {
    score: Number
  }
}
</script>

首先我们把要做星级图片用类名为star-item的span标签循环出来,星级图片有三张,全星,半星,空星

Vue实现星级评价效果实例详解

Vue实现星级评价效果实例详解

Vue实现星级评价效果实例详解

下面只罗列关键的css部分, 通过增加类区分图片

.star-item.on {
  background-image: url(./img/star24_on@2x.png);
}
.star-item.half {
  background-image: url(./img/star24_half@2x.png);
}
.star-item.off {
  background-image: url(./img/star24_off@2x.png);
}

接下来修改Star.vue的代码

<div class="star">
 <span 
  class="star-item" 
  v-for="(itemClass, index) in itemClasses"
  :key="index"
  :class="itemClass"
 >
 </span>
</div>

itemClasses值是通过计算属性获取的,思路:

通过computed返回一个长度为5的数组(显示5颗星)

数组的值是上述css取的不同星对应的类名,再通过绑定每一个循环添加的class,从而遍历星级。

比如举例评分:

4.7分对应的数组为['on', 'on', 'on', 'on', 'half']

3.4分对应的数组为['on', 'on', 'on', 'half', 'half']

JS部分的代码:

// 星星长度 
const LENGTH = 5

// 星星的状态
const CLS_ON = 'on'
const CLS_HALF = 'half'
const CLS_OFF = 'off'

export default {
  name: 'Star',
  props: {
    score: Number
  },
  computed: {
    itemClasses () {
      let result = []

      let score = Math.floor(this.score * 2) / 2

      // 半星 (通过跟1取余判断是否为小数)
      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
    }
  }
}

itemClasses最终是返回了一个长度为5的数组,需要注意的是

let score = Math.floor(this.score * 2) / 2

半星的划分:只有当小数第一位大于或等于5才可以算为半星,否则是空星。该计算是为了小数部分>=0.5的计算结果带有小数,从而再后面跟1取余判断是否为半星。一开始有点蒙,多试几个数想想就懂了。

比如4.3分没有半星,4.5有半星出现

结果:

比如传入的值为4.7,则显示

 Vue实现星级评价效果实例详解

总结

以上所述是小编给大家介绍的Vue实现星级评价效果实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 #Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 #Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 #Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 #Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 #Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 #Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 #Javascript
You might like
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP里的中文变量说明
2011/07/23 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
用 JSON 处理缓存
2007/04/27 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python快速从注释生成文档的方法
2016/12/26 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
生产工厂门卫岗位职责
2014/09/26 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
简历自我评价优缺点
2015/03/11 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
52条SQL语句教你性能优化
2021/05/25 MySQL
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle