DDR爱好者之家

Vue实现星级评价效果实例详解
站长资源 2024/11/24 佚名
73 1538
DDR爱好者之家 Design By 杰米

我们把星级评价单独做成一个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实现星级评价效果实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米