Commit b9ecbd538448dcafee34843943cb0c0dbee9b3ae
1 parent
1ead5bb6
update Rate #3853
Showing
3 changed files
with
45 additions
and
9 deletions
Show diff stats
examples/routers/rate.vue
@@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
9 | show-text | 9 | show-text |
10 | v-model="characterValue" | 10 | v-model="characterValue" |
11 | character="好"/> | 11 | character="好"/> |
12 | + <Rate allow-half v-model="cv" icon="ios-heart" /> | ||
12 | <!--<Rate show-text v-model="valueText"></Rate>--> | 13 | <!--<Rate show-text v-model="valueText"></Rate>--> |
13 | <!--<Rate show-text allow-half v-model="valueCustomText">--> | 14 | <!--<Rate show-text allow-half v-model="valueCustomText">--> |
14 | <!--<span style="color: #f5a623">{{ valueCustomText }}</span>--> | 15 | <!--<span style="color: #f5a623">{{ valueCustomText }}</span>--> |
@@ -27,7 +28,8 @@ | @@ -27,7 +28,8 @@ | ||
27 | valueDisabled: 2.4, | 28 | valueDisabled: 2.4, |
28 | valueClear: 1, | 29 | valueClear: 1, |
29 | valueClearHalf: 1.5, | 30 | valueClearHalf: 1.5, |
30 | - characterValue: 2.5 | 31 | + characterValue: 2.5, |
32 | + cv: 3.5 | ||
31 | } | 33 | } |
32 | } | 34 | } |
33 | } | 35 | } |
src/components/rate/rate.vue
@@ -7,13 +7,23 @@ | @@ -7,13 +7,23 @@ | ||
7 | @mousemove="handleMousemove(item, $event)" | 7 | @mousemove="handleMousemove(item, $event)" |
8 | :key="item" | 8 | :key="item" |
9 | @click="handleClick(item)"> | 9 | @click="handleClick(item)"> |
10 | - <div :class="starCls(item)" v-if="!character"> | 10 | + <template v-if="!showCharacter"> |
11 | <span :class="[prefixCls + '-star-content']" type="half"></span> | 11 | <span :class="[prefixCls + '-star-content']" type="half"></span> |
12 | - </div> | ||
13 | - <div :class="starCls(item)" v-else> | ||
14 | - <span :class="[prefixCls + '-star-first']" type="half">{{character}}</span> | ||
15 | - <span :class="[prefixCls + '-star-second']">{{character}}</span> | ||
16 | - </div> | 12 | + </template> |
13 | + <template v-else> | ||
14 | + <template v-if="character !== ''"> | ||
15 | + <span :class="[prefixCls + '-star-first']" type="half">{{ character }}</span> | ||
16 | + <span :class="[prefixCls + '-star-second']">{{ character }}</span> | ||
17 | + </template> | ||
18 | + <template v-else> | ||
19 | + <span :class="[prefixCls + '-star-first']" type="half"> | ||
20 | + <i :class="iconClasses" type="half"></i> | ||
21 | + </span> | ||
22 | + <span :class="[prefixCls + '-star-second']"> | ||
23 | + <i :class="iconClasses"></i> | ||
24 | + </span> | ||
25 | + </template> | ||
26 | + </template> | ||
17 | </div> | 27 | </div> |
18 | <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0"> | 28 | <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0"> |
19 | <slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot> | 29 | <slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot> |
@@ -24,11 +34,14 @@ | @@ -24,11 +34,14 @@ | ||
24 | import Locale from '../../mixins/locale'; | 34 | import Locale from '../../mixins/locale'; |
25 | import Emitter from '../../mixins/emitter'; | 35 | import Emitter from '../../mixins/emitter'; |
26 | 36 | ||
37 | + import Icon from '../icon/icon.vue'; | ||
38 | + | ||
27 | const prefixCls = 'ivu-rate'; | 39 | const prefixCls = 'ivu-rate'; |
28 | 40 | ||
29 | export default { | 41 | export default { |
30 | name: 'Rate', | 42 | name: 'Rate', |
31 | mixins: [ Locale, Emitter ], | 43 | mixins: [ Locale, Emitter ], |
44 | + components: { Icon }, | ||
32 | props: { | 45 | props: { |
33 | count: { | 46 | count: { |
34 | type: Number, | 47 | type: Number, |
@@ -60,6 +73,14 @@ | @@ -60,6 +73,14 @@ | ||
60 | character: { | 73 | character: { |
61 | type: String, | 74 | type: String, |
62 | default: '' | 75 | default: '' |
76 | + }, | ||
77 | + icon: { | ||
78 | + type: String, | ||
79 | + default: '' | ||
80 | + }, | ||
81 | + customIcon: { | ||
82 | + type: String, | ||
83 | + default: '' | ||
63 | } | 84 | } |
64 | }, | 85 | }, |
65 | data () { | 86 | data () { |
@@ -79,6 +100,18 @@ | @@ -79,6 +100,18 @@ | ||
79 | [`${prefixCls}-disabled`]: this.disabled | 100 | [`${prefixCls}-disabled`]: this.disabled |
80 | } | 101 | } |
81 | ]; | 102 | ]; |
103 | + }, | ||
104 | + iconClasses () { | ||
105 | + return [ | ||
106 | + `ivu-icon`, | ||
107 | + { | ||
108 | + [`ivu-icon-${this.icon}`]: this.icon !== '', | ||
109 | + [`${this.customIcon}`]: this.customIcon !== '', | ||
110 | + } | ||
111 | + ]; | ||
112 | + }, | ||
113 | + showCharacter () { | ||
114 | + return this.character !== '' || this.icon !== '' || this.customIcon !== ''; | ||
82 | } | 115 | } |
83 | }, | 116 | }, |
84 | watch: { | 117 | watch: { |
@@ -107,8 +140,8 @@ | @@ -107,8 +140,8 @@ | ||
107 | 140 | ||
108 | return [ | 141 | return [ |
109 | { | 142 | { |
110 | - [`${prefixCls}-star`]: !this.character, | ||
111 | - [`${prefixCls}-star-chart`]: this.character, | 143 | + [`${prefixCls}-star`]: !this.showCharacter, |
144 | + [`${prefixCls}-star-chart`]: this.showCharacter, | ||
112 | [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf), | 145 | [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf), |
113 | [`${prefixCls}-star-half`]: isLast && this.isHalf, | 146 | [`${prefixCls}-star-half`]: isLast && this.isHalf, |
114 | [`${prefixCls}-star-zero`]: !full | 147 | [`${prefixCls}-star-zero`]: !full |
src/styles/components/rate.less