4回答

ustbhuangyi

2017-10-18

你试试 import Star，s 大写

0

1

一只码农

还是不行，之前饮用header组件一样的方式都好好的。我这个是vue2.0的，不知道是否有影响

2017-10-18

共1条回复

ustbhuangyi

2017-10-17

发个代码截图吧

0

2

一只码农

谢谢老师，刚鼓捣出来了，是我自己粗心了，在star文件外面写了一个star.vue的完整文件，在star文件夹里面写了一个star.vue空文件导致的，自己把自己坑了

2017-10-18

共2条回复

一只码农

提问者

2017-10-17

<template>

  <div :class="starType">

   <span v-for="itemClass in itemClasses" :class="itemClass"></span>

  </div>

</template>

<script>

const LENGTH = 5;

const CLS_ON = "on";

const CLS_OFF = "off";

const CLS_HALF = "half";

export default {

props{

size: {

type: Number

},

score: {

type: Number

}

},

computed: {

starType() {

return "star-" + this.size;

},

itemClasses() {

let result = [];

let score = Math.floor(this.score * 2) / 2;

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 scoped>

@import "../common/less/mixin.less";

  .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");

}

&.off{

.bg-image("star48_off");

}

&.half{

.bg-image("star48_half");

}

}

  }

  &.star-36{

  >.star-item{

width: 15px;

height: 15px;

margin-right: 16px;

background-size: 15px 15px;

&:last-child{

margin-right: 0;

}

&.on{

.bg-image("star36_on");

}

&.off{

.bg-image("star36_off");

}

&.half{

.bg-image("star36_half");

}

}

  }

  &.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");

}

&.off{

.bg-image("star24_off");

}

&.half{

.bg-image("star24_half");

}

}

  }

  }

</style>

0

0

ustbhuangyi

2017-10-16

你的 star.vue 组件怎么写的？

0

1

一只码农

2017-10-17

共1条回复