support Radio

support Radio

src/components/radio/radio-group.vue

@@ -11,7 +11,7 @@
     export default {
         name: 'radioGroup',
         props: {
-            model: {
+            value: {
                 type: [String, Number],
                 default: ''
             },
@@ -30,6 +30,11 @@
                 default: false
             }
         },
+        data () {
+            return {
+                currentValue: this.value
+            }
+        },
         computed: {
             classes () {
                 return [
@@ -42,27 +47,29 @@
                 ];
             }
         },
-        compiled () {
-            this.updateModel();
+        mounted () {
+            this.updateValue();
         },
         methods: {
-            updateModel () {
-                const model = this.model;
+            updateValue () {
+                const value = this.value;
                 this.$children.forEach((child) => {
-                    child.selected = model == child.value;
+                    child.currentValue = value == child.label;
                     child.group = true;
                 });
             },
             change (data) {
-                this.model = data.value;
-                this.updateModel();
+                this.currentValue = data.value;
+                this.updateValue();
+                this.$emit('input', data.value);
                 this.$emit('on-change', data.value);
-                this.$dispatch('on-form-change', data.value);
+                // todo 事件
+//                this.$dispatch('on-form-change', data.value);
             }
         },
         watch: {
-            model () {
-                this.updateModel();
+            value () {
+                this.updateValue();
             }
         }
     };

src/components/radio/radio.vue

@@ -6,31 +6,32 @@
                 type="radio"
                 :class="inputClasses"
                 :disabled="disabled"
-                :checked="selected"
+                :checked="currentValue"
                 @change="change">
-        </span><slot>{{ value }}</slot>
+        </span><slot>{{ label }}</slot>
     </label>
 </template>
 <script>
     const prefixCls = 'ivu-radio';
 
     export default {
+        name: 'Radio',
         props: {
-            checked: {
+            value: {
                 type: Boolean,
                 default: false
             },
+            label: {
+                type: [String, Number]
+            },
             disabled: {
                 type: Boolean,
                 default: false
-            },
-            value: {
-                type: [String, Number]
             }
         },
         data () {
             return {
-                selected: false,
+                currentValue: this.value,
                 group: false
             };
         },
@@ -40,7 +41,7 @@
                     `${prefixCls}-wrapper`,
                     {
                         [`${prefixCls}-group-item`]: this.group,
-                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled
                     }
                 ];
@@ -49,7 +50,7 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-checked`]: this.currentValue,
                         [`${prefixCls}-disabled`]: this.disabled
                     }
                 ];
@@ -61,10 +62,10 @@
                 return `${prefixCls}-input`;
             }
         },
-        ready () {
+        mounted () {
             if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
             if (!this.group) {
-                this.updateModel();
+                this.updateValue();
             }
         },
         methods: {
@@ -73,25 +74,27 @@
                     return false;
                 }
 
-                this.selected = event.target.checked;
-                this.checked = this.selected;
+                const checked = event.target.checked;
+                this.currentValue = checked;
+                this.$emit('input', checked);
+                this.$emit('on-change', checked);
 
-                if (this.group && this.checked) {
+                if (this.group && this.label) {
                     this.$parent.change({
-                        value: this.value,
-                        checked: this.checked
+                        value: this.label,
+                        checked: this.value
                     });
                 }
-
-                if (!this.group) this.$dispatch('on-form-change', this.selected);
+                // todo 事件
+//                if (!this.group) this.$dispatch('on-form-change', checked);
             },
-            updateModel () {
-                this.selected = this.checked;
+            updateValue () {
+                this.currentValue = this.value;
             }
         },
         watch: {
-            checked () {
-                this.updateModel();
+            value () {
+                this.updateValue();
             }
         }
     };