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.lazyload.js实现页面延迟载入
Dec 22 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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中jpgraph类库的使用介绍
2013/08/08 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
js 窗口抖动示例
2013/09/04 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
vue实现计步器功能
2019/11/01 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python中交换两个元素的实现方法
2018/06/29 Python
行政办公室岗位职责
2014/03/18 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
根叔历年演讲稿
2014/05/20 职场文书
质量保证书
2015/01/17 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
Linux中各个目录的作用与内容
2022/06/28 Servers