fix rate

components/rate/Rate.vue

@@ -5,14 +5,14 @@
     <template v-for="i in count">
       <Star
         ref="stars"
-        :index="i"
+        :index="i - 1"
         :disabled="disabled"
         :prefix-cls="`${prefixCls}-star`"
         :allowHalf="allowHalf"
-        :value="currentValue"
-        @onClick="onClick"
-        @onHover="onHover"
-        :key="i">
+        :value="hoverValue === undefined ? stateValue : hoverValue"
+        @click="onClick"
+        @hover="onHover"
+        :key="i - 1">
         <template slot-scope="props">
           <slot>
             <span>{{character}}</span>
@@ -25,8 +25,8 @@
 
 <script>
 import Star from './Star.vue'
-import Icon from '../icon/index'
-import { getOffsetLeft } from '../util/util'
+import Icon from '../icon'
+import { getOffsetLeft } from './util'
 
 export default {
   name: 'Rate',
@@ -44,14 +44,6 @@ export default {
       type: Number,
       default: 0,
     },
-    onChange: {
-      type: Function,
-      default: () => {},
-    },
-    onHoverChange: {
-      type: Function,
-      default: () => {},
-    },
     allowHalf: {
       type: Boolean,
       default: false,
@@ -69,7 +61,7 @@ export default {
     const { value, defaultValue } = this
     const reValue = value === undefined ? defaultValue : value
     return {
-      currentValue: reValue,
+      hoverValue: reValue,
       stateValue: reValue,
     }
   },
@@ -84,46 +76,43 @@ export default {
   },
   methods: {
     onClick (event, index) {
-      const clValue = this.getStarValue(index, event.pageX)
-      this.stateValue = clValue
+      const value = this.getStarValue(index, event.pageX)
+      if (this.value === undefined) {
+        this.stateValue = value
+      }
       this.onMouseLeave()
-      this.$emit('input', clValue)
-      this.onChange(clValue)
+      this.$emit('input', value)
+      this.$emit('change', value)
     },
     onHover (event, index) {
-      this.currentValue = this.getStarValue(index, event.pageX)
-      this.changeValue(this.currentValue)
-      this.onHoverChange(this.currentValue)
+      const value = this.getStarValue(index, event.pageX)
+      this.hoverValue = value
+      this.$emit('hover-change', value)
     },
     getStarDOM (index) {
       return this.$refs.stars[index].$el
     },
     getStarValue (index, x) {
-      let value = index
-      if (this.allowHalf) {
-        const leftEdge = getOffsetLeft(this.getStarDOM(0))
-        const width = getOffsetLeft(this.getStarDOM(1)) - leftEdge
-        if ((x - leftEdge - width * (index - 1)) < width / 2) {
+      const { allowHalf, getStarDOM } = this
+      let value = index + 1
+      if (allowHalf) {
+        const leftEdge = getOffsetLeft(getStarDOM(0))
+        const width = getOffsetLeft(getStarDOM(1)) - leftEdge
+        if ((x - leftEdge - width * index) < width / 2) {
           value -= 0.5
         }
       }
       return value
     },
     onMouseLeave () {
-      this.currentValue = undefined
-      this.changeValue()
-      this.onHoverChange()
-    },
-    changeValue (val) {
-      if (val === undefined) {
-        this.currentValue = this.stateValue
-      }
+      if (this.disabled) return
+      this.hoverValue = undefined
+      this.$emit('hover-change')
     },
   },
   watch: {
-    value (val = 0) {
-      this.currentValue = this.stateValue = val
-      this.$emit('input', val)
+    value (val) {
+      this.stateValue = val
     },
   },
   components: {

components/rate/Star.vue

@@ -1,10 +1,10 @@
 <template>
   <li
-    :class="getClassName()"
+    :class="getClassName"
     @click="onClick"
     @mousemove="onHover">
-    <div :class="`${this.prefixCls}-first`"><slot></slot></div>
-    <div :class="`${this.prefixCls}-second`"><slot></slot></div>
+    <div :class="`${prefixCls}-first`"><slot></slot></div>
+    <div :class="`${prefixCls}-second`"><slot></slot></div>
   </li>
 </template>
 <script>
@@ -17,26 +17,24 @@ export default {
     allowHalf: Boolean,
     value: Number,
   },
-  data () {
-    return {
-    }
-  },
-  methods: {
+  computed: {
     getClassName () {
       const { prefixCls, index, value, allowHalf } = this
-      const starValue = index
+      const starValue = index + 1
       if (allowHalf && value + 0.5 === starValue) {
         return `${prefixCls} ${prefixCls}-half ${prefixCls}-active`
       }
       return starValue <= value ? `${prefixCls} ${prefixCls}-full` : `${prefixCls} ${prefixCls}-zero`
     },
+  },
+  methods: {
     onClick (e) {
       if (this.disabled) return
-      this.$emit('onClick', e, this.index)
+      this.$emit('click', e, this.index)
     },
     onHover (e) {
       if (this.disabled) return
-      this.$emit('onHover', e, this.index)
+      this.$emit('hover', e, this.index)
     },
   },
 }

components/rate/demo/rate.vue

@@ -16,14 +16,14 @@
     </br>
     回调函数
     <Rate
-      :onChange="onChange"
-      :onHoverChange="onHoverChange"></Rate>
+      @change="onChange"
+      @hover-change="onHoverChange"></Rate>
     <span v-if="hoverValue">{{hoverValue}}stars</span>
     <span v-if="rValue">{{rValue}}stars</span>
     <br/>
     <Rate
       :allowHalf="allowHalf"
-      :onHoverChange="onHoverChangeAH"></Rate>
+      @hover-change="onHoverChangeAH"></Rate>
     <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
     </br>
     自定义

components/rate/util.js

@@ -30,7 +30,7 @@ function getClientPosition (elem) {
   }
 }
 
-export const getOffsetLeft = (el) => {
+export function getOffsetLeft (el) {
   const pos = getClientPosition(el)
   const doc = el.ownerDocument
   const w = doc.defaultView || doc.parentWindow