update RadioGroup

update RadioGroup

examples/routers/radio.vue

@@ -1,28 +1,27 @@
 <template>
     <div>
-        <Radio v-model="single" @on-change="c">Radio</Radio>
+        <Radio-group v-model="phone">
-        <Radio-group v-model="phone" type="button" @on-change="c">
+            <Row>
-            <Radio label="apple">
+                <i-col span="8">
-                <Icon type="social-apple"></Icon>
+                    <Radio label="apple">
-                <span>Apple</span>
+                        <Icon type="social-apple"></Icon>
-            </Radio>
+                        <span>Apple</span>
-            <Radio label="android">
+                    </Radio>
-                <Icon type="social-android"></Icon>
+                </i-col>
-                <span>Android</span>
+                <i-col span="8">
-            </Radio>
+                    <Radio label="android">
-            <Radio label="windows">
+                        <Icon type="social-android"></Icon>
-                <Icon type="social-windows"></Icon>
+                        <span>Android</span>
-                <span>Windows</span>
+                    </Radio>
-            </Radio>
+                </i-col>
+                <i-col span="8">
+                    <Radio label="windows">
+                        <Icon type="social-windows"></Icon>
+                        <span>Windows</span>
+                    </Radio>
+                </i-col>
+            </Row>
         </Radio-group>
-        <Radio-group v-model="animal">
-            <Radio label="金斑蝶"></Radio>
-            <Radio label="爪哇犀牛"></Radio>
-            <Radio label="印度黑羚"></Radio>
-        </Radio-group>
-        {{ phone }}
-        <div @click="phone = 'apple'">apple</div>
-        <div @click="single = true"> single</div>{{ single }}
     </div>
 </template>
 <script>
@@ -30,13 +29,7 @@
         data () {
             return {
                 phone: 'apple',
-                animal: '爪哇犀牛',
+                animal: '爪哇犀牛'
-                single: false
-            }
-        },
-        methods: {
-            c (data) {
-                console.log(data)
             }
         }
     }

src/components/radio/radio-group.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 <script>
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, findComponentsDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-radio-group';
@@ -34,7 +34,8 @@
         },
         data () {
             return {
-                currentValue: this.value
+                currentValue: this.value,
+                childrens: []
             };
         },
         computed: {
@@ -55,10 +56,14 @@
         methods: {
             updateValue () {
                 const value = this.value;
-                this.$children.forEach((child) => {
+                this.childrens = findComponentsDownward(this, 'Radio');
-                    child.currentValue = value == child.label;
+
-                    child.group = true;
+                if (this.childrens) {
-                });
+                    this.childrens.forEach(child => {
+                        child.currentValue = value == child.label;
+                        child.group = true;
+                    });
+                }
             },
             change (data) {
                 this.currentValue = data.value;

src/components/radio/radio.vue

@@ -12,6 +12,7 @@
     </label>
 </template>
 <script>
+    import { findComponentUpward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-radio';
@@ -35,7 +36,8 @@
         data () {
             return {
                 currentValue: this.value,
-                group: false
+                group: false,
+                parent: findComponentUpward(this, 'RadioGroup')
             };
         },
         computed: {
@@ -66,8 +68,8 @@
             }
         },
         mounted () {
-            // todo 使用 while向上查找
+            this.parent = findComponentUpward(this, 'RadioGroup');
-            if (this.$parent && this.$parent.$options.name === 'RadioGroup') this.group = true;
+            if (this.parent) this.group = true;
             if (!this.group) {
                 this.updateValue();
             }
@@ -83,7 +85,7 @@
                 this.$emit('input', checked);
 
                 if (this.group && this.label) {
-                    this.$parent.change({
+                    this.parent.change({
                         value: this.label,
                         checked: this.value
                     });

src/utils/assist.js

@@ -185,9 +185,9 @@ function findComponentUpward (content, componentName, componentNames) {
 }
 export {findComponentUpward};
 
-// Find components downward
+// Find component downward
 function findComponentDownward (content, componentName) {
-    let childrens = content.$children;
+    const childrens = content.$children;
     let children = null;
 
     if (childrens.length) {
@@ -212,4 +212,24 @@ function findComponentDownward (content, componentName) {
     }
     return children;
 }
-export {findComponentDownward};
+export {findComponentDownward};
+
+// Find components downward
+function findComponentsDownward (content, componentName, components = []) {
+    const childrens = content.$children;
+
+    if (childrens.length) {
+        childrens.forEach(child => {
+            const name = child.$options.name;
+            const childs = child.$children;
+
+            if (name === componentName) components.push(child);
+            if (childs.length) {
+                const findChilds = findComponentsDownward(child, componentName, components);
+                if (findChilds) components.concat(findChilds);
+            }
+        });
+    }
+    return components;
+}
+export {findComponentsDownward};