Merge pull request #335 from huixisheng/feature-rate

Support rate

src/components/rate/rate.vue

@@ -7,18 +7,19 @@
             @click="handleClick(item)">
             <span :class="[prefixCls + '-star-content']" type="half"></span>
         </div>
-        <div :class="[prefixCls + '-text']" v-if="showText" v-show="value > 0">
-            <slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
+        <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
+            <slot>{{ currentValue }} <template v-if="currentValue <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
         </div>
     </div>
 </template>
 <script>
     import Locale from '../../mixins/locale';
+    import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-rate';
 
     export default {
-        mixins: [ Locale ],
+        mixins: [ Locale, Emitter ],
         props: {
             count: {
                 type: Number,
@@ -46,9 +47,16 @@
                 prefixCls: prefixCls,
                 hoverIndex: -1,
                 isHover: false,
-                isHalf: false
+                isHalf: false,
+                currentValue: 0
             };
         },
+        // created () {
+        //     this.currentValue = this.value;
+        //     this.setHalf(this.currentValue);
+        // },
+        mounted () {
+        },
         computed: {
             classes () {
                 return [
@@ -63,24 +71,38 @@
             value: {
                 immediate: true,
                 handler (val) {
-                    this.setHalf(val);
+                    this.currentValue = val;
+                }
+            },
+            // valur (val) {
+            //     console.log(val);
+            //     this.currentValue = val;
+            //     console.log(this.currentValue);
+            // },
+            currentValue: {
+                immediate: true,
+                handler (val) {
+                    this.setHalf(this.currentValue);
                 }
             }
+            // currentValue () {
+            //     this.setHalf(this.currentValue);
+            // }
         },
         methods: {
             starCls (value) {
                 const hoverIndex = this.hoverIndex;
-                const currentIndex = this.isHover ? hoverIndex : this.value;
+                const currentIndex = this.isHover ? hoverIndex : this.currentValue;
 
                 let full = false;
                 let isLast = false;
 
-                if (currentIndex > value) full = true;
+                if (currentIndex >= value) full = true;
 
                 if (this.isHover) {
-                    isLast = currentIndex === value + 1;
+                    isLast = currentIndex === value;
                 } else {
-                    isLast = Math.ceil(this.value) === value + 1;
+                    isLast = Math.ceil(this.currentValue) === value;
                 }
 
                 return [
@@ -102,13 +124,13 @@
                 } else {
                     this.isHalf = false;
                 }
-                this.hoverIndex = value + 1;
+                this.hoverIndex = value;
             },
             handleMouseleave () {
                 if (this.disabled) return;
 
                 this.isHover = false;
-                this.setHalf(this.value);
+                this.setHalf(this.currentValue);
                 this.hoverIndex = -1;
             },
             setHalf (val) {
@@ -116,11 +138,13 @@
             },
             handleClick (value) {
                 if (this.disabled) return;
-                value++;
+                // value++;
                 if (this.isHalf) value -= 0.5;
-                this.value = value;
-                this.$emit('on-change', value);
-                this.$dispatch('on-form-change', value);
+                this.currentValue = value;
+                this.$emit('on-change', this.currentValue);
+                this.$emit('input', this.currentValue);
+                // @todo
+                // this.$dispatch('on-form-change', value);
             }
         }
     };

src/index.js

@@ -28,7 +28,7 @@ import InputNumber from './components/input-number';
 // import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
-// import Rate from './components/rate';
+import Rate from './components/rate';
 // import Slider from './components/slider';
 // import Spin from './components/spin';
 import Steps from './components/steps';
@@ -91,7 +91,7 @@ const iview = {
     Progress,
     Radio,
     RadioGroup: Radio.Group,
-    // Rate,
+    Rate,
     Row,
     // iSelect: Select,
     // Slider,

test/app.vue

@@ -32,6 +32,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/carousel">Carousel</router-link></li>
                 <li><router-link to="/card">Card</router-link></li>
                 <li><router-link to="/tree">Tree</router-link></li>
+                <li><router-link to="/rate">Rate</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -92,6 +92,10 @@ const router = new VueRouter({
         {
             path: '/tree',
             component: require('./routers/tree.vue')
+        },
+        {
+            path: '/rate',
+            component: require('./routers/rate.vue')
         }
     ]
 });

test/routers/rate.vue

@@ -1,13 +1,19 @@
 <template>
     <Row>
         <i-col span="12">
-            <Rate show-text :value.sync="valueText"></Rate>
+            <Rate show-text :value="valueText"></Rate>
         </i-col>
         <i-col span="12">
-            <Rate show-text :value.sync="valueCustomText">
+            <Rate show-text v-model="valueCustomText" >
                 <span style="color: #f5a623">{{ valueCustomText }}</span>
             </Rate>
         </i-col>
+        <i-col span="12">
+            <Rate disabled :value="valueDisabled"></Rate>
+        </i-col>
+        <i-col span="12">
+            <Rate allow-half :value="valueHalf" v-on:on-change="changeValue"></Rate>
+        </i-col>
     </Row>
 </template>
 <script>
@@ -16,10 +22,16 @@
         data () {
             return {
                 valueText: 3,
-                valueCustomText: 3.8
+                valueCustomText: 3.8,
+                valueDisabled: 2,
+                valueHalf: 2.5
             };
         },
         computed: {},
-        methods: {}
+        methods: {
+            changeValue (val) {
+                console.log(val);
+            }
+        }
     };
 </script>