uni-app自定义可爱评分插件

------------恢复内容开始------------

自定义组件页面

<template name="peTao">
<view class="block">
<image
v-for="(petaoItem,petaoIndex) in petao" :key="petaoIndex+'0'"
src="../../static/petao/petao.png"
class="icon">
</image>
<image
v-for="(petaoNoItem,petaoNoIndex) in petaoNo" :key="petaoNoIndex+'1'"
src="../../static/petao/petaono.png"
class="icon">
</image>
<view class="score" v-if="showNum == 1">
{{innerScore}}
</view>
</view>
</template>

<script>
export default {
name:'peTao',
data() {
return {
petao:0,
petaoNo:5
};
},
props:{
innerScore:0, //定义外部传入的分数 10为满分
showNum:0 //是否需要显示具体的分数 1:显示 0:不显示
},
//生命周期，组件创建完成后被调用
created() {
var tempScore = 0;
if(this.innerScore != null && this.innerScore != undefined && this.innerScore != ''){
tempScore = this.innerScore;
}
var petao = parseInt(tempScore / 2);
var petaoNo = 5 - petao;
this.petao = petao;
this.petaoNo = petaoNo;
},
}
</script>

<style>
.block{
display: flex;
flex-direction: row;
}
.icon{
width: 60upx;
height:60upx;
margin-top: 6upx;
}
.score{
font-size: 12px;
color: grey;
margin-left: 8upx;
}
</style>

引用页面

<template>
<view class="content">
<view class="block">
<peTao :innerScore="innerScore" :showNum="showNum"></peTao>
</view>
</view>
</template>

<script>
import peTao from "../../components/petao/petao.vue"
export default {
components:{
peTao
},
data() {
return {
innerScore:4,
showNum:1
}
},
onLoad() {

},
methods: {

}
}
</script>

<style>
page{
background-color: #f0f0f0;
}
.content{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.block{
width: 100%;
height: 800upx;
display: flex;
align-items: center;
justify-content: center;
}
</style>

评分图片在static目录下，可以自己更换。

效果图

------------恢复内容结束------------