uni-app 自定义组件之星级评价分数

效果图：

 1.自定义的组件StarsRating.vue文件

<template name="StarsRating">
    <view class="stars">
        <image @click="btnStars1" class="starsicon" :src="starsObject[0]" mode="widthFix"></image>
        <image @click="btnStars2" class="starsicon" :src="starsObject[1]" mode="widthFix"></image>
        <image @click="btnStars3" class="starsicon" :src="starsObject[2]" mode="widthFix"></image>
        <image @click="btnStars4" class="starsicon" :src="starsObject[3]" mode="widthFix"></image>
        <image @click="btnStars5" class="starsicon" :src="starsObject[4]" mode="widthFix"></image>
        <text class="txt-stars">{ {starsIndex}}.0</text>
    </view>
</template>

<script>
    export default {
        name: "StarsRating",
        data() {
            return {

            };
        },
        props: {
            starsIndex: {}, // 星级评价分数
            isEditStars: {}, // 是否编辑星级评价分数
            starsObject: {} // 数组
        },
        methods: {
            btnStars1: function() {
                var _this = this