Merge branch 'master' of https://github.com/vueComponent/ant-design
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…
Reference in New Issue