<template>
    <div>
        <h1>Rate</h1>
        <p>评分组件，可以配置图片，如果不配置originalPath参数的话，默认为五角星。</p>
        <!-- DEMO区域 -->
        <p>默认用法</p>
        <nut-rate :num='5'   @change-rate="changeRate"></nut-rate>
        
        <p>可配置图片路径，需同时配置图片的高度和宽度</p>
        <!-- DEMO代码 -->
        <nut-rate :num='10'  :currValue="2" originalPath="data:image/png;base64,[encoded data, 4416 characters]" :picWidth='0.32' :picHeight='0.31' activePath="data:image/png;base64,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" @change-rate="changeRate"></nut-rate>    </div>
</template>

<script>
export default {
    data(){
        return{
        }
        
    },
    methods:{
        changeRate(index){
            console.log(index);
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
