fix rate

components/rate/Rate.vue

@@ -1,32 +1,7 @@
-<template>
-  <ul
-    :class="classes"
-    @mouseleave="onMouseLeave">
-    <template v-for="i in count">
-      <Star
-        ref="stars"
-        :index="i - 1"
-        :disabled="disabled"
-        :prefix-cls="`${prefixCls}-star`"
-        :allowHalf="allowHalf"
-        :value="hoverValue === undefined ? stateValue : hoverValue"
-        @click="onClick"
-        @hover="onHover"
-        :key="i - 1">
-        <template slot-scope="props">
-          <slot>
-            <span>{{character}}</span>
-          </slot>
-        </template>
-      </Star>
-    </template>
-  </ul>
-</template>
-
 <script>
 import Star from './Star.vue'
 import Icon from '../icon'
-import { getOffsetLeft } from './util'
+import { getOffsetLeft, deepClone } from './util'
 
 export default {
   name: 'Rate',
@@ -73,13 +48,17 @@ export default {
         [`${prefixCls}-disabled`]: disabled,
       }
     },
+    countList () {
+      return new Array(this.count).fill(1)
+    },
+    hasDefaultSlot () {
+      return !!this.$slots.default
+    },
   },
   methods: {
     onClick (event, index) {
       const value = this.getStarValue(index, event.pageX)
-      if (this.value === undefined) {
+      this.stateValue = value
-        this.stateValue = value
-      }
       this.onMouseLeave()
       this.$emit('input', value)
       this.$emit('change', value)
@@ -90,7 +69,7 @@ export default {
       this.$emit('hover-change', value)
     },
     getStarDOM (index) {
-      return this.$refs.stars[index].$el
+      return this.$refs['stars' + index].$el
     },
     getStarValue (index, x) {
       const { allowHalf, getStarDOM } = this
@@ -119,5 +98,36 @@ export default {
     Star,
     Icon,
   },
+  render (createElement, a) {
+    const self = this
+    return createElement('ul', {
+      class: self.classes,
+      on: {
+        'mouseleave': self.onMouseLeave,
+      },
+    }, [
+      (
+        self.countList.map((item, i) => {
+          return createElement('Star', {
+            attrs: {
+              index: i,
+              disabled: self.disabled,
+              'prefix-cls': `${self.prefixCls}-star`,
+              allowHalf: self.allowHalf,
+              value: self.hoverValue === undefined ? self.stateValue : self.hoverValue,
+            },
+            ref: 'stars' + i,
+            key: i,
+            on: {
+              'click': self.onClick,
+              'hover': self.onHover,
+            },
+          }, [
+            ((self.hasDefaultSlot) ? (deepClone(self.$slots.default, createElement)) : this.character),
+          ])
+        })
+      ),
+    ])
+  },
 }
 </script>

components/rate/Star.vue

@@ -1,13 +1,6 @@
-<template>
-  <li
-    :class="getClassName"
-    @click="onClick"
-    @mousemove="onHover">
-    <div :class="`${prefixCls}-first`"><slot></slot></div>
-    <div :class="`${prefixCls}-second`"><slot></slot></div>
-  </li>
-</template>
 <script>
+import { deepClone } from './util'
+
 export default {
   name: 'Star',
   props: {
@@ -37,5 +30,31 @@ export default {
       this.$emit('hover', e, this.index)
     },
   },
+  render (createElement) {
+    return createElement('li', {
+      attrs: {
+        class: this.getClassName,
+      },
+      on: {
+        'click': this.onClick,
+        'mousemove': this.onHover,
+      },
+    }, [
+      createElement('div', {
+        attrs: {
+          class: `${this.prefixCls}-first`,
+        },
+      }, [
+        ...this.$slots.default,
+      ]),
+      createElement('div', {
+        attrs: {
+          class: `${this.prefixCls}-second`,
+        },
+      }, [
+        ...deepClone(this.$slots.default, createElement),
+      ]),
+    ])
+  },
 }
 </script>

components/rate/demo/index.vue

@@ -27,7 +27,14 @@
     <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
     </br>
     自定义
-    <Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
+    </br>
+    <Rate v-model="initValue" :allowHalf="allowHalf">
+      <Icon type="heart" />
+    </Rate>
+    </br>
+    <Rate :value="initValue" :allowHalf="allowHalf" character="A"></Rate>
+    </br>
+    <Rate :value="initValue"  character="好"></Rate>
   </div>
 </template>
 <script>

components/rate/util.js

@@ -37,3 +37,23 @@ export function getOffsetLeft (el) {
   pos.left += getScroll(w)
   return pos.left
 }
+
+export function deepClone (vnodes, createElement) {
+  function cloneVNode (vnode) {
+    const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode))
+    const cloned = createElement(vnode.tag, vnode.data, clonedChildren)
+    cloned.text = vnode.text
+    cloned.isComment = vnode.isComment
+    cloned.componentOptions = vnode.componentOptions
+    cloned.elm = vnode.elm
+    cloned.context = vnode.context
+    cloned.ns = vnode.ns
+    cloned.isStatic = vnode.isStatic
+    cloned.key = vnode.key
+
+    return cloned
+  }
+
+  const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode))
+  return clonedVNodes
+}