<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <div class="block">
                            <span class="demonstration">默认不区分颜色</span>
                            <e-rate v-model="value1"></e-rate>
                            </div>
                            <div class="block">
                            <span class="demonstration">区分颜色</span>
                            <e-rate
                                v-model="value2"
                                :colors="colors">
                            </e-rate>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 辅助文字 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>辅助文字</span>
                    </div>
                    <div>
                        <e-rate
                            v-model="value"
                            show-text>
                        </e-rate>
                    </div>
                </e-card>
            </e-col>
            <!-- 其它 icon -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>其它 icon</span>
                    </div>
                    <div>
                        <el-rate
                        v-model="value"
                        :icon-classes="iconClasses"
                        void-icon-class="icon-rate-face-off"
                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                        </el-rate>
                    </div>
                </e-card>
            </e-col>
            <!-- 只读 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>只读</span>
                    </div>
                    <div>
                        <e-rate
                            v-model="value4"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                        </e-rate>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            value: null,
            value1: null,
            value2: null,
            value3: null,
            value4: 3.7,
            iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'], // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
