tangjinzhou 7 years ago
commit b7d855ba7b

@ -15,7 +15,7 @@
:key="i"> :key="i">
<template slot-scope="props"> <template slot-scope="props">
<slot> <slot>
<Icon type="star"/> <span v-html="character"></span>
</slot> </slot>
</template> </template>
</Star> </Star>
@ -24,6 +24,7 @@
</template> </template>
<script> <script>
import Vue from 'vue';
import Star from './Star.vue'; import Star from './Star.vue';
import Icon from '../icon/index'; import Icon from '../icon/index';
import { getOffsetLeft } from '../util/util'; import { getOffsetLeft } from '../util/util';
@ -59,19 +60,21 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
character: {
type: String,
default: '★'
},
className: String, className: String,
}, },
data() { data() {
const reValue = this.value || this.defaultValue;
return { return {
prefixCls: 'ant-rate', prefixCls: 'ant-rate',
hoverValue: undefined, hoverValue: undefined,
currentValue: undefined, currentValue: reValue,
markValue: undefined, markValue: reValue,
} }
}, },
created () {
this.currentValue = this.markValue = this.value || this.defaultValue
},
watch: { watch: {
hoverValue(val) { hoverValue(val) {
if(val === undefined) { if(val === undefined) {
@ -79,6 +82,12 @@ export default {
return; return;
} }
this.currentValue = val; this.currentValue = val;
},
value() {
this.currentValue = this.markValue = this.value || this.defaultValue;
},
markValue(val) {
this.$emit('input', val);
} }
}, },
methods: { methods: {

@ -46,7 +46,7 @@ export default {
}, },
watch: { watch: {
}, },
commponents: { components: {
} }
} }
</script> </script>

@ -1,13 +1,15 @@
<template> <template>
<div> <div>
基本 基本
<Rate className="custom"></Rate> <Rate className="custom" :allowHalf="allowHalf"></Rate>
</br> </br>
半星 半星
<Rate :allowHalf="allowHalf"></Rate> <Rate :allowHalf="allowHalf"></Rate>
</br> </br>
默认3颗星 默认3颗星
<Rate :value="initValue"></Rate> <Rate v-model="initValue"></Rate>
<AntButton type="primary" @click="changeValue"></AntButton>
<AntButton type="primary" @click="getValue"></AntButton>
</br> </br>
只读 只读
<Rate :value="initValue" :disabled="disabled"></Rate> <Rate :value="initValue" :disabled="disabled"></Rate>
@ -25,15 +27,11 @@
<span v-if="hoverValueAH">{{hoverValueAH}}stars</span> <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
</br> </br>
自定义 自定义
<Rate :value="initValue"> <Rate :value="initValue" :character="character"></Rate>
<template slot-scope="props">
<span>A</span>
</template>
</Rate>
</div> </div>
</template> </template>
<script> <script>
import { Rate } from '../components/index' import { Rate, Icon, Button } from '../components/index'
export default { export default {
data () { data () {
return { return {
@ -43,6 +41,7 @@ export default {
hoverValue: undefined, hoverValue: undefined,
rValue: undefined, rValue: undefined,
hoverValueAH: undefined, hoverValueAH: undefined,
character: '好'
} }
}, },
methods: { methods: {
@ -54,10 +53,18 @@ export default {
}, },
onHoverChangeAH(val) { onHoverChangeAH(val) {
this.hoverValueAH = val; this.hoverValueAH = val;
},
changeValue() {
this.initValue = 4;
},
getValue() {
alert(this.initValue)
} }
}, },
components: { components: {
Rate Rate,
Icon,
AntButton: Button,
}, },
} }
</script> </script>

Loading…
Cancel
Save