From 552408d5fdb8b2863a89c601ccfe3949ad469d43 Mon Sep 17 00:00:00 2001
From: wqzwh <1424195010@qq.com>
Date: Sat, 9 Jun 2018 00:11:42 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20rate=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0character=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/routers/rate.vue       |  6 +++++
 src/components/rate/rate.vue    | 18 +++++++++++---
 src/styles/components/rate.less | 44 +++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/examples/routers/rate.vue b/examples/routers/rate.vue
index 7e9fba4f..d766a9bd 100644
--- a/examples/routers/rate.vue
+++ b/examples/routers/rate.vue
@@ -4,6 +4,11 @@
         <Rate allow-half v-model="valueHalf"></Rate>
         <Rate clearable v-model="valueClear"></Rate>
         <Rate clearable allow-half  v-model="valueClearHalf"></Rate>
+        <Rate 
+            allow-half 
+            show-text
+            v-model="characterValue"
+            character="好"/>
         <!--<Rate show-text v-model="valueText"></Rate>-->
         <!--<Rate show-text allow-half v-model="valueCustomText">-->
             <!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
@@ -22,6 +27,7 @@
                 valueDisabled: 2.4,
                 valueClear: 1,
                 valueClearHalf: 1.5,
+                characterValue: 2.5
             }
         }
     }
diff --git a/src/components/rate/rate.vue b/src/components/rate/rate.vue
index ad7082ae..376ac01e 100644
--- a/src/components/rate/rate.vue
+++ b/src/components/rate/rate.vue
@@ -5,8 +5,15 @@
             v-for="item in count"
             :class="starCls(item)"
             @mousemove="handleMousemove(item, $event)"
+            :key="item"
             @click="handleClick(item)">
-            <span :class="[prefixCls + '-star-content']" type="half"></span>
+            <div :class="starCls(item)" v-if="!character">
+                <span :class="[prefixCls + '-star-content']" type="half"></span>
+            </div>
+            <div :class="starCls(item)" v-else>
+                <span :class="[prefixCls + '-star-first']" type="half">{{character}}</span>
+                <span :class="[prefixCls + '-star-second']">{{character}}</span>
+            </div>
         </div>
         <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
             <slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot>
@@ -49,6 +56,10 @@
             clearable: {
                 type: Boolean,
                 default: false
+            },
+            character: {
+                type: String,
+                default: ''
             }
         },
         data () {
@@ -95,8 +106,9 @@
                 }
 
                 return [
-                    `${prefixCls}-star`,
-                    {
+                    {   
+                        [`${prefixCls}-star`]: !this.character,
+                        [`${prefixCls}-star-chart`]: this.character,
                         [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
                         [`${prefixCls}-star-half`]: isLast && this.isHalf,
                         [`${prefixCls}-star-zero`]: !full
diff --git a/src/styles/components/rate.less b/src/styles/components/rate.less
index d1ad1728..121799aa 100644
--- a/src/styles/components/rate.less
+++ b/src/styles/components/rate.less
@@ -19,6 +19,50 @@
         }
     }
 
+    &-star-full, &-star-zero {
+        position: relative;
+    }
+    &-star-first {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    &-star-first, &-star-second {
+        user-select: none;
+        transition: all .3s ease;
+        color: #e9e9e9;
+    }
+
+    &-star-chart {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        font-family: 'Ionicons';
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+
+            &-star-first, &-star-second {
+                color: @rate-star-color;
+            }
+        }
+    }
+    &-star-chart&-star-full &-star-first, &-star-chart&-star-full &-star-second{
+        color: @rate-star-color;
+    }
+    &-star-chart&-star-half &-star-first{
+        opacity: 1;
+        color: @rate-star-color;
+    }
+    
     &-star {
         display: inline-block;
         margin: 0;