optimize rate component

components/rate/Rate.vue

@@ -15,7 +15,7 @@
         :key="i">
         <template slot-scope="props">
           <slot>
-            <Icon type="star"/>
+            <span v-html="character"></span>
           </slot>
         </template>
       </Star>
@@ -24,6 +24,7 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import Star from './Star.vue';
 import Icon from '../icon/index';
 import { getOffsetLeft } from '../util/util';
@@ -59,19 +60,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    character: {
+      type: String,
+      default: '★'
+    },
     className: String,
   },
   data() {
+    const reValue = this.value || this.defaultValue;
     return {
       prefixCls: 'ant-rate',
       hoverValue: undefined,
-      currentValue: undefined,
-      markValue: undefined,
+      currentValue: reValue,
+      markValue: reValue,
     }
   },
-  created () {
-    this.currentValue = this.markValue = this.value || this.defaultValue
-  },
   watch: {
     hoverValue(val) {
       if(val === undefined) {
@@ -79,6 +82,12 @@ export default {
         return;
       }
       this.currentValue = val;
+    },
+    value() {
+      this.currentValue = this.markValue = this.value || this.defaultValue;
+    },
+    markValue(val) {
+      this.$emit('input', val);
     }
   },
   methods: {

components/rate/Star.vue

@@ -46,7 +46,7 @@ export default {
   },
   watch: {
   },
-  commponents: {
+  components: {
   }
 }
 </script>

examples/rate.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
     基本
-    <Rate className="custom"></Rate>
+    <Rate className="custom" :allowHalf="allowHalf"></Rate>
     </br>
     半星
     <Rate :allowHalf="allowHalf"></Rate>
     </br>
     默认3颗星
-    <Rate :value="initValue"></Rate>
+    <Rate v-model="initValue"></Rate>
+    <AntButton type="primary" @click="changeValue">改变</AntButton>
+    <AntButton type="primary" @click="getValue">当前值</AntButton>
     </br>
     只读
     <Rate :value="initValue" :disabled="disabled"></Rate>
@@ -25,15 +27,11 @@
     <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
     </br>
     自定义
-    <Rate :value="initValue">
-      <template slot-scope="props">
-        <span>A</span>
-      </template>
-    </Rate>
+    <Rate :value="initValue" :character="character"></Rate>
   </div>
 </template>
 <script>
-import { Rate } from '../components/index'
+import { Rate, Icon, Button } from '../components/index'
 export default {
   data () {
     return {
@@ -43,6 +41,7 @@ export default {
       hoverValue: undefined,
       rValue: undefined,
       hoverValueAH: undefined,
+      character: '好'
     }
   },
   methods: {
@@ -54,10 +53,18 @@ export default {
     },
     onHoverChangeAH(val) {
       this.hoverValueAH = val;
+    },
+    changeValue() {
+      this.initValue = 4;
+    },
+    getValue() {
+      alert(this.initValue)
     }
   },
   components: {
-    Rate
+    Rate,
+    Icon,
+    AntButton: Button,
   },
 }
 </script>