radio

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["env"],
-  "plugins": ["transform-vue-jsx"]
+  "plugins": ["transform-vue-jsx", "transform-object-rest-spread"]
 }

components/checkbox/Group.vue

@@ -56,8 +56,8 @@ export default {
       const { options, $slots, checkedStatus } = this
       if (options.length === 0 && $slots.default) {
         children.forEach(({ componentOptions = {}, children: newChildren }) => {
-          const { tag, propsData } = componentOptions
+          const { Ctor, propsData } = componentOptions
-          if (tag === 'Checkbox') {
+          if (Ctor && Ctor.options.name === 'Checkbox') {
             propsData.isGroup = true
             propsData.onGroupChange = this.handleChange
             propsData.checked = checkedStatus.has(propsData.value)

components/checkbox/checkbox.vue

@@ -28,10 +28,6 @@ export default {
     indeterminate: Boolean,
     onGroupChange: Function,
   },
-  data () {
-    return {
-    }
-  },
   model: {
     prop: 'checked',
   },

components/radio/Group.vue

@@ -54,8 +54,8 @@ export default {
       const { options, $slots, value } = this
       if (options.length === 0 && $slots.default) {
         children.forEach(({ componentOptions = {}, children: newChildren }) => {
-          const { tag, propsData } = componentOptions
+          const { Ctor, propsData } = componentOptions
-          if (tag === 'Radio') {
+          if (Ctor && Ctor.options.name === 'Radio') {
             propsData.isGroup = true
             propsData.onGroupChange = this.handleChange
             propsData.checked = propsData.value === value

components/radio/Radio.vue

@@ -25,7 +25,6 @@ export default {
     isGroup: Boolean,
     value: [String, Number, Boolean],
     name: String,
-    indeterminate: Boolean,
     onGroupChange: Function,
   },
   model: {

components/radio/RadioButton.vue

@@ -0,0 +1,41 @@
+<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>

components/radio/index.js

@@ -2,5 +2,15 @@ import Radio from './Radio.vue'
 import RadioGroup from './Group.vue'
 
 Radio.Group = RadioGroup
+Radio.Button = {
+  extends: Radio,
+  props: {
+    ...Radio.props,
+    prefixCls: {
+      default: 'ant-radio-button',
+      type: String,
+    },
+  },
+}
 export default Radio
 

components/radio/style/index.less

@@ -134,6 +134,7 @@ span.@{radio-prefix-cls} + * {
 }
 
 .@{radio-prefix-cls}-button-wrapper {
+  float: left;
   margin: 0;
   height: @input-height-base;
   line-height: @input-height-base - 2px;

examples/radio.vue

@@ -13,6 +13,14 @@
       <Radio v-if="showMore" name="test4" value="4">Radio4</Radio>
     </RadioGroup>
     <RadioGroup :options="options" v-model="value1"  @change="change"></RadioGroup>
+    <div>
+    <RadioGroup v-model="value2" size="large">
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
+    </RadioGroup>
+  </div>
   </div>
 </template>
 <script>
@@ -29,6 +37,7 @@ export default {
       ],
       value: '1',
       value1: '',
+      value2: 'a',
       showMore: false,
     }
   },
@@ -46,6 +55,7 @@ export default {
   components: {
     Radio,
     RadioGroup: Radio.Group,
+    RadioButton: Radio.Button,
     AntButton: Button,
   },
 }

package.json

@@ -31,6 +31,7 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-loader": "^7.1.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.6.0",
     "css-loader": "^0.28.7",