defaultValue

pull/9/head
tangjinzhou 2017-11-02 12:07:20 +08:00
parent 4af93c1207
commit cf8809864b
4 changed files with 47 additions and 60 deletions

View File

@ -1,6 +1,6 @@
<template>
<div :class="`${prefixCls}`">
<Radio v-for="item in options" :key="item.value" :checked="item.value === value"
<Radio v-for="item in options" :key="item.value" :checked="item.value === stateValue"
:value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Radio>
<slot v-if="options.length === 0"></slot>
</div>
@ -14,7 +14,14 @@ export default {
default: 'ant-radio-group',
type: String,
},
value: [String, Number],
defaultValue: {
default: undefined,
type: [String, Number],
},
value: {
default: undefined,
type: [String, Number],
},
size: {
default: 'default',
validator (value) {
@ -27,8 +34,9 @@ export default {
},
},
data () {
const { value, defaultValue } = this
return {
curValue: this.value,
stateValue: value || defaultValue,
}
},
model: {
@ -46,19 +54,22 @@ export default {
return false
}
const target = event.target
const { value } = target
this.$emit('input', value)
this.$emit('change', value)
const { value: targetValue } = target
if (this.value === undefined) {
this.stateValue = targetValue
}
this.$emit('input', targetValue)
this.$emit('change', targetValue)
},
setChildRadio (children = []) {
const { options, $slots, value } = this
const { options, $slots, stateValue } = this
if (options.length === 0 && $slots.default) {
children.forEach(({ componentOptions = {}, children: newChildren }) => {
const { Ctor, propsData } = componentOptions
if (Ctor && Ctor.options.name === 'Radio') {
propsData.isGroup = true
propsData.onGroupChange = this.handleChange
propsData.checked = propsData.value === value
propsData.checked = propsData.value === stateValue
} else {
this.setChildRadio(newChildren)
}
@ -71,6 +82,7 @@ export default {
},
watch: {
value (val) {
this.stateValue = val
this.setChildRadio(this.$slots.default)
},
},

View File

@ -2,7 +2,7 @@
<label :class="classes">
<span :class="checkboxClass">
<input :name="name" type="radio" :disabled="disabled"
:class="`${prefixCls}-input`" :checked="!!checked"
:class="`${prefixCls}-input`" :checked="stateChecked"
@change="handleChange"
/>
<span :class="`${prefixCls}-inner`" />
@ -20,7 +20,8 @@ export default {
default: 'ant-radio',
type: String,
},
checked: Boolean,
defaultChecked: Boolean,
checked: { type: Boolean, default: undefined },
disabled: Boolean,
isGroup: Boolean,
value: [String, Number, Boolean],
@ -30,35 +31,45 @@ export default {
model: {
prop: 'checked',
},
data () {
const { checked, defaultChecked } = this
return {
stateChecked: checked === undefined ? defaultChecked : checked,
}
},
computed: {
hasDefaultSlot () {
return !!this.$slots.default
},
classes () {
const { prefixCls, disabled, checked } = this
const { prefixCls, disabled, stateChecked } = this
return {
[`${prefixCls}-wrapper`]: true,
[`${prefixCls}-wrapper-checked`]: checked,
[`${prefixCls}-wrapper-checked`]: stateChecked,
[`${prefixCls}-wrapper-disabled`]: disabled,
}
},
checkboxClass () {
const { prefixCls, disabled, checked } = this
const { prefixCls, disabled, stateChecked } = this
return {
[`${prefixCls}`]: true,
[`${prefixCls}-checked`]: checked,
[`${prefixCls}-checked`]: stateChecked,
[`${prefixCls}-disabled`]: disabled,
}
},
},
methods: {
handleChange (event) {
const { name, value } = this
this.$emit('input', true)
const targetChecked = event.target.checked
const { name, value, checked } = this
if (checked === undefined) {
this.stateChecked = targetChecked
}
this.$emit('input', targetChecked)
const target = {
name,
value,
checked: true,
checked: targetChecked,
}
this.$emit('change', {
target,
@ -74,5 +85,10 @@ export default {
}
},
},
watch: {
checked (val) {
this.stateChecked = val
},
},
}
</script>

View File

@ -1,41 +0,0 @@
<template>
<div :class="`${prefixCls}`">
<Radio v-for="item in options" :key="item.value" :checked="item.value === value"
:value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Radio>
<slot v-if="options.length === 0"></slot>
</div>
</template>
<script>
import Radio from './Radio.vue'
export default {
name: 'Radio',
props: {
prefixCls: {
default: 'ant-radio-button',
type: String,
},
value: [String, Number],
size: {
default: 'default',
validator (value) {
return ['large', 'default', 'small'].includes(value)
},
},
options: {
default: () => [],
type: Array,
},
},
data () {
return {
curValue: this.value,
}
},
model: {
prop: 'value',
},
components: {
Radio,
},
}
</script>

View File

@ -1,6 +1,6 @@
<template>
<div>
<Radio v-model="checked" @change="change" name="test" value="123">Radio</Radio>
<Radio @change="change" :defaultChecked="true" name="test" value="123">Radio</Radio>
<Radio :checked="false" @change="change" name="test2" value="222">Radio</Radio>
<RadioGroup v-model="value" @change="change">
@ -14,7 +14,7 @@
</RadioGroup>
<RadioGroup :options="options" v-model="value1" @change="change"></RadioGroup>
<div>
<RadioGroup v-model="value2" size="large">
<RadioGroup :defaultValue="'a'" size="large">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>