vue-star中如何实现一个评星组件

发布时间:2022-04-22 10:30:51 作者:iii
来源:亿速云 阅读:165

本篇内容主要讲解“vue-star中如何实现一个评星组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue-star中如何实现一个评星组件”吧!

star文件夹下建立Star.vue,及相关的图片信息。便于组件的就近维护

vue-star中如何实现一个评星组件

Star.vue:

<template>
 <div class="star" :class="starSize">
 <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>
 </div>
</template>
<script>
 const LENGTH = 5;
 const CLS_ON = 'on';
 const CLS_HALF = 'half';
 const CLS_OFF = 'off';
 export default{
 props:{
  size:{ //尺寸,24,36,48
  type: Number
  },
  score:{
  type: Number
  }
 },
 computed:{
  starSize(){
  return 'star-'+ this.size;
  },
  itemClasses(){
  let result = [];
  let score = Math.floor(this.score*2)/2; //将数值调整为整数及.5的形式,例:4.3 => 4;4.6 => 4.5
  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;
  }
 }
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl";
.star
 font-size: 0
 .star-item
 display: inline-block
 background-repeat: no-repeat
 &.star-48
 .star-item
  width: 20px
  height: 20px
  margin-right: 22px
  background-size: 20px 20px
  &.last-child
  margin-right: 0
  &.on
  bg-image('star48_on')
  &.half
  bg-image('star48_half')
  &.off
  bg-image('star48_off')
 &.star-36
 .star-item
  width: 15px
  height: 15px
  margin-right: 6px
  background-size: 15px 15px
  &.last-child
  margin-right: 0
  &.on
  bg-image('star36_on')
  &.half
  bg-image('star36_half')
  &.off
  bg-image('star36_off')
 &.star-24
 .star-item
  width: 10px
  height: 10px
  margin-right: 3px
  background-size: 10px 10px
  &.last-child
  margin-right: 0
  &.on
  bg-image('star24_on')
  &.half
  bg-image('star24_half')
  &.off
  bg-image('star24_off')
</style>

Header.vue:

<star :size="48" :score="3.5"></star>
<script>
import star from '../star/Star.vue'
export default{
 components:{
 star
 }
}
</script>

mixin.styl:

bg-image($url)
 background-image: url($url + '@2x.png')
 @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3)
 background-image: url($url + '@3x.png')

到此,相信大家对“vue-star中如何实现一个评星组件”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. python 实现A星算法
  2. [置顶]       jQuery评星插件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue star

上一篇:vue中如何实现子组件向父组件传值

下一篇:vue-prop中如何实现父组件向子组件进行传值

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》