vue 五星评分组件封装

start组件：

<template name="start">
<view class="movie-score-wapper">
<!-- 黄色的循环 -->
<image
v-for="yellow in yellowScore"
src=""
class="start-ico"> </image>
<!-- 灰色的循环 -->
<image
v-for="gray in grayScore"
src="" mode="" class="start-ico"></image>

<view class="movie-score" v-if="showNum == 1">
{{innerSorce}}
<view/>
</view>
</template>

<script>
export default {
name:"start",
data() {
return {
yellowScore:0,
grayScore:5
};
},
props:{
innerSorce:0, // 定义外部传入的分数
showNum:0 // 是否需要显示具体的得分数 1：显示 0：不显示
},
created(){
var tempScore = 0;
if(this.innerSorce != null && this.innerSorce != undefined && this.innerSorce != ''){
tempScore = this.innerSorce
}
var yellowScore = parseInt(tempScore / 2);
var grayScore = 5 - yellowScore;

this.yellowScore = yellowScore;
this.
}
}
</script>

<style>
.movie-score-wapper{
display: flex;
flex-direction: row;
}
.start-ico{
width: 20upx;
height: 20upx;
margin-top: 6upx;
}
.movie-score{
font-size: 12upx;
color: grey;
margin: 8upx;
}

</style>

页面使用：

<template>
<view>
<start innerSorce="10" showNum="1"></start>
</view>
</template>

<script>
import start from '@/components/start/start.vue'
export default {
components:{
start
},
data() {
return {

}
},
methods: {

}
}
</script>