defaultValue
parent
4af93c1207
commit
cf8809864b
|
@ -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)
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue