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 相关文章推荐
基于jquery的气泡提示效果
May 31 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
JavaScript如何操作css
Oct 24 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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/06/29 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Javascript MD4
2006/12/20 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
pip命令无法使用的解决方法
2018/06/12 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
tensorflow的计算图总结
2020/01/12 Python
django下创建多个app并设置urls方法
2020/08/02 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
团结就是力量演讲稿
2014/05/21 职场文书
团干部培训方案
2014/06/03 职场文书
国庆阅兵观后感
2015/06/15 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis