defaultValue

components/radio/Group.vue

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

components/radio/Radio.vue

@@ -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>

components/radio/RadioButton.vue

@@ -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>

examples/radio.vue

@@ -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>