当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue-star评星组件开发实例

vue-star评星组件开发实例

2019年06月06日  | 移动技术网IT编程  | 我要评论

运达快递,河北邢台市长,92.xxoo

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

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评星组件开发实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网