drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support rate

Browse source
This commit is contained in:
huixisheng 2017-03-02 19:31:21 +08:00
parent 49dd45f46f
commit 6aa7272260
5 changed files with 62 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/components/rate/rate.vue
View file

@ -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);
}
}
};