other / mew-iview

Commit 6aa72722609a973e592bed8032d2ba3cd351793b

Authored by huixisheng
1 parent 49dd45f4

Support rate

Showing 5 changed files with 62 additions and 21 deletions   Show diff stats
Inline Side-by-side
src/components/rate/rate.vue
  Show/Hide comments   View file @6aa7272
... ... @@ -7,18 +7,19 @@
7 7 @click="handleClick(item)">
8 8 <span :class="[prefixCls + '-star-content']" type="half"></span>
9 9 </div>
10   - <div :class="[prefixCls + '-text']" v-if="showText" v-show="value > 0">
11   - <slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
  10 + <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
  11 + <slot>{{ currentValue }} <template v-if="currentValue <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
12 12 </div>
13 13 </div>
14 14 </template>
15 15 <script>
16 16 import Locale from '../../mixins/locale';
  17 + import Emitter from '../../mixins/emitter';
17 18  
18 19 const prefixCls = 'ivu-rate';
19 20  
20 21 export default {
21   - mixins: [ Locale ],
  22 + mixins: [ Locale, Emitter ],
22 23 props: {
23 24 count: {
24 25 type: Number,
... ... @@ -46,9 +47,16 @@
46 47 prefixCls: prefixCls,
47 48 hoverIndex: -1,
48 49 isHover: false,
49   - isHalf: false
  50 + isHalf: false,
  51 + currentValue: 0
50 52 };
51 53 },
  54 + // created () {
  55 + // this.currentValue = this.value;
  56 + // this.setHalf(this.currentValue);
  57 + // },
  58 + mounted () {
  59 + },
52 60 computed: {
53 61 classes () {
54 62 return [
... ... @@ -63,24 +71,38 @@
63 71 value: {
64 72 immediate: true,
65 73 handler (val) {
66   - this.setHalf(val);
  74 + this.currentValue = val;
  75 + }
  76 + },
  77 + // valur (val) {
  78 + // console.log(val);
  79 + // this.currentValue = val;
  80 + // console.log(this.currentValue);
  81 + // },
  82 + currentValue: {
  83 + immediate: true,
  84 + handler (val) {
  85 + this.setHalf(this.currentValue);
67 86 }
68 87 }
  88 + // currentValue () {
  89 + // this.setHalf(this.currentValue);
  90 + // }
69 91 },
70 92 methods: {
71 93 starCls (value) {
72 94 const hoverIndex = this.hoverIndex;
73   - const currentIndex = this.isHover ? hoverIndex : this.value;
  95 + const currentIndex = this.isHover ? hoverIndex : this.currentValue;
74 96  
75 97 let full = false;
76 98 let isLast = false;
77 99  
78   - if (currentIndex > value) full = true;
  100 + if (currentIndex >= value) full = true;
79 101  
80 102 if (this.isHover) {
81   - isLast = currentIndex === value + 1;
  103 + isLast = currentIndex === value;
82 104 } else {
83   - isLast = Math.ceil(this.value) === value + 1;
  105 + isLast = Math.ceil(this.currentValue) === value;
84 106 }
85 107  
86 108 return [
... ... @@ -102,13 +124,13 @@
102 124 } else {
103 125 this.isHalf = false;
104 126 }
105   - this.hoverIndex = value + 1;
  127 + this.hoverIndex = value;
106 128 },
107 129 handleMouseleave () {
108 130 if (this.disabled) return;
109 131  
110 132 this.isHover = false;
111   - this.setHalf(this.value);
  133 + this.setHalf(this.currentValue);
112 134 this.hoverIndex = -1;
113 135 },
114 136 setHalf (val) {
... ... @@ -116,11 +138,13 @@
116 138 },
117 139 handleClick (value) {
118 140 if (this.disabled) return;
119   - value++;
  141 + // value++;
120 142 if (this.isHalf) value -= 0.5;
121   - this.value = value;
122   - this.$emit('on-change', value);
123   - this.$dispatch('on-form-change', value);
  143 + this.currentValue = value;
  144 + this.$emit('on-change', this.currentValue);
  145 + this.$emit('input', this.currentValue);
  146 + // @todo
  147 + // this.$dispatch('on-form-change', value);
124 148 }
125 149 }
126 150 };
... ...
src/index.js
  Show/Hide comments   View file @6aa7272
... ... @@ -28,7 +28,7 @@ import InputNumber from &#39;./components/input-number&#39;;
28 28 // import Poptip from './components/poptip';
29 29 import Progress from './components/progress';
30 30 import Radio from './components/radio';
31   -// import Rate from './components/rate';
  31 +import Rate from './components/rate';
32 32 // import Slider from './components/slider';
33 33 // import Spin from './components/spin';
34 34 import Steps from './components/steps';
... ... @@ -91,7 +91,7 @@ const iview = {
91 91 Progress,
92 92 Radio,
93 93 RadioGroup: Radio.Group,
94   - // Rate,
  94 + Rate,
95 95 Row,
96 96 // iSelect: Select,
97 97 // Slider,
... ...
test/app.vue
  Show/Hide comments   View file @6aa7272
... ... @@ -32,6 +32,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
32 32 <li><router-link to="/carousel">Carousel</router-link></li>
33 33 <li><router-link to="/card">Card</router-link></li>
34 34 <li><router-link to="/tree">Tree</router-link></li>
  35 + <li><router-link to="/rate">Rate</router-link></li>
35 36 </ul>
36 37 </nav>
37 38 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @6aa7272
... ... @@ -92,6 +92,10 @@ const router = new VueRouter({
92 92 {
93 93 path: '/tree',
94 94 component: require('./routers/tree.vue')
  95 + },
  96 + {
  97 + path: '/rate',
  98 + component: require('./routers/rate.vue')
95 99 }
96 100 ]
97 101 });
... ...
test/routers/rate.vue
  Show/Hide comments   View file @6aa7272
1 1 <template>
2 2 <Row>
3 3 <i-col span="12">
4   - <Rate show-text :value.sync="valueText"></Rate>
  4 + <Rate show-text :value="valueText"></Rate>
5 5 </i-col>
6 6 <i-col span="12">
7   - <Rate show-text :value.sync="valueCustomText">
  7 + <Rate show-text v-model="valueCustomText" >
8 8 <span style="color: #f5a623">{{ valueCustomText }}</span>
9 9 </Rate>
10 10 </i-col>
  11 + <i-col span="12">
  12 + <Rate disabled :value="valueDisabled"></Rate>
  13 + </i-col>
  14 + <i-col span="12">
  15 + <Rate allow-half :value="valueHalf" v-on:on-change="changeValue"></Rate>
  16 + </i-col>
11 17 </Row>
12 18 </template>
13 19 <script>
... ... @@ -16,10 +22,16 @@
16 22 data () {
17 23 return {
18 24 valueText: 3,
19   - valueCustomText: 3.8
  25 + valueCustomText: 3.8,
  26 + valueDisabled: 2,
  27 + valueHalf: 2.5
20 28 };
21 29 },
22 30 computed: {},
23   - methods: {}
  31 + methods: {
  32 + changeValue (val) {
  33 + console.log(val);
  34 + }
  35 + }
24 36 };
25 37 </script>
26 38 \ No newline at end of file
... ...