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 相关文章推荐
js Math 对象的方法
Sep 01 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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
探讨如何把session存入数据库
2013/06/07 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
详解python多线程之间的同步(一)
2019/04/03 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
解决pip install psycopg2出错问题
2020/07/09 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
自我鉴定范文
2013/11/10 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
党员创先争优活动总结
2014/05/04 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python